Разборный <div> клик по ссылке

Question

Разборный <div> клик по ссылке

0

У меня есть что-то вроде ниже:

$grabarticles = $db->prepare("
    SELECT title, message
        FROM articles
");
$grabarticles->execute();
foreach($grabarticles as $articles) {
    echo $articles["title"];
    //when a user clicks the text above, reveal the below
    echo "<div id='article'><br/><br/>";
    echo "&nbsp;".$articles["message"];
    echo "</div><br/><br/>";
    //when a user clicks the $articles["title"] again, it then collapses
}

Я не слишком хорошо разбираюсь в Javascript, чтобы узнать, но есть ли какие-то вещи, которые я могу сделать, чтобы сделать $articles["title"] доступными для кликов, а onclick ниже, чтобы отобразить содержимое $articles["message"], но также быть обратимым с другим onclick? Вот изображение, чтобы проиллюстрировать:

Я хочу, чтобы каждый <div> был отделен от другого, поэтому, если я открою # 1, щелкнув $article["title"]//1, а затем откройте # 2, щелкнув соответствующий текст, я могу закрыть # 1, откидываясь назад он не мешает # 2.

gator 20 окт. 2013, в 00:49

Источник

0

добавить прослушиватель событий для каждого заголовка и переключить класс .active ... Похоже, вы ищете базовый эффект аккордеона.
brbcoding 19 окт. 2013, в 22:00
1

Если вам нужен эффект аккордеона, jsfiddle.net/K7XTq/1
Lawrence Cherone 19 окт. 2013, в 22:07
0

@LawrenceCherone, это на самом деле довольно изящно. Я не слишком хорошо разбираюсь в Javascript (на самом деле, я действительно использую его только для alert() ), так что это довольно привлекательно для кого-то, в общем, новичка в этом.
gator 19 окт. 2013, в 22:10

Показать ещё 1 комментарий

Теги:

php

javascript

jquery

html

3 ответа

1

Использовать jscript

<script type="text/javascript">
$(function () {
    $('#testTitle').click(function (e) {
        if ($("#testcontent").is(":visible")) {
            $("#testcontent").slideUp("slow");
        }
        else {
            $("#testcontent").slideDown("slow");
        }
    });

});

Animus Miles-Militis 19 окт. 2013, в 20:27

1

Вы хотите использовать этот разборчивый плагин DIV jQuery, написанный Джоном Снайдером. Он делает именно то, что вы ищете.

Я использую это в своем блоге, вы можете увидеть его пример здесь и здесь

Пример HTML

<html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
    <link href="/stylesheet.css" rel="stylesheet" type="text/css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="/js/jquery.collapsible.js"></script>
    <div class='collapsible'>
       Header Text 1<span></span>
    </div>
    <div class='container'>
       <div class='content'>
          <div>
             Body Text 1
          </div>
       </div>
    </div>
    <div class='collapsible'>
       Header Text 2<span></span>
    </div>
    <div class='container'>
       <div class='content'>
          <div>
             Body Text 2
          </div>
       </div>
    </div>
</html>

CSS, чтобы согласиться с этим

/* START SECTION FOR COLLAPSEIBLE DIV */
.collapse-open {
/*    background:#000;
    color: #fff;*/
}

.collapse-open span {
    display:block;
    float:left;
    padding:10px;
    background:url(/images/minus.png) center center no-repeat;
}

.collapse-close span {
    display:block;
    float:left;
    background:url(/images/plus.png) center center no-repeat;
    padding:10px;
}

ProfessionalAmateur 19 окт. 2013, в 19:16

Ещё вопросы

добавить прослушиватель событий для каждого заголовка и переключить класс .active ... Похоже, вы ищете базовый эффект аккордеона.
Если вам нужен эффект аккордеона, jsfiddle.net/K7XTq/1
@LawrenceCherone, это на самом деле довольно изящно. Я не слишком хорошо разбираюсь в Javascript (на самом деле, я действительно использую его только для alert() ), так что это довольно привлекательно для кого-то, в общем, новичка в этом.

Ohgodwhy · Accepted Answer · 2013-10-19T19-16-00.000Z

Оберните заголовок статьи в элемент DOM, с которым могут быть связаны события, например, span. Затем дайте ему класс, чтобы мы могли легко нацелиться на него.

echo '<span class="article-title">', $articles["title"] ,'</span>';

Далее, ваш id в цикле foreach должен быть классом, поскольку вы генерируете несколько элементов, и только один элемент может иметь один идентификатор.

echo "<div class='article' style='display:none;'><br/><br/>"; // <--note the "class" instead of "id"

Теперь просто сделайте функцию щелчка, чтобы Google видимость элемента.

$('.article-title').click(function(){
    $(this).next().toggle(); // find the next element after this one and toggle it viibility
});