Question

我已经看到这个（显然）完全相同的问题在这里解决，但解决方案根本不适合我。我似乎无法选择我想要显示/隐藏的元素。

我有以下HTML，重复了几个类似的项目：

<div class="item">
  <div class="titleRow">
    <h3 class="yesterday">Some text</h3>
    <h3 class="today">Some other text</h3>
  </div>
</div> <!-- /item (table) -->

<div class="details">
  <p>A long paragraph of description.</p>
</div>

这个JS：

$('.details').hide();

$('body.page-id-55 .titleRow').toggle(
    function() {

    $(this).parent().next('.details').slideDown();
    $(this).addClass('close');
    },

    function() {
    $(this).parent().next('.details').slideUp();
    $(this).removeClass('close');
    }
)

我的理解是，由于.titleRow被点击，并且.details是其父（.item）的下一个兄弟，因此应该定位.details，并在点击.titleRow div时向下滚动。

但事实上没有任何反应。

如果我将该行更改为

$('.details').slideDown();

它有效，但当然.details的所有实例都会向下滚动。我只想在点击的div之后激活下一个。

我做错了什么？

更新：

即使有了andyface的好建议，点击时我仍然没有动作。我甚至试过这个：

$('body.page-id-55 .titleRow').on('click', function() {

    $details = $(this).parent().next('.details');

    $details.show();

});

To（我会假设）强迫所有.details简单地变得可见 - 但是也没有任何事情发生。

我页面上其他JS的可能干扰？

似乎仍然存在树遍历问题，因为如果我这样做：

$('body.page-id-55 .titleRow').on('click', function() {

  $('.details').show();

});

他们都出现了。

至于其他javascripts被加载的潜在冲突，我至少可以确认我的js是最后一个被加载的，因为我正在使用正确的WordPress入队方法通过functions.php加载它。这是标题中的所有js - 我的两个（一个用于另一个页面）是最后一个：

<script type='text/javascript' src='http://gazeleyandgazeley.com/site/wp-includes/js/jquery/jquery.js?ver=1.11.0'></script>
<script type='text/javascript' src='http://gazeleyandgazeley.com/site/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='http://gazeleyandgazeley.com/site/wp-content/themes/twentythirteen-child/js/sidebarfix.js?ver=9.9.9'></script>
<script type='text/javascript' src='http://gazeleyandgazeley.com/site/wp-content/themes/twentythirteen-child/js/gteam.js?ver=9.9.9'></script>
<script type='text/javascript' src='http://gazeleyandgazeley.com/site/wp-content/themes/twentythirteen-child/js/rolldowns.js?ver=9.9.9'></script>

首先加载它还是在文档末尾加载它会有所作为？似乎因为遍历是唯一“不”工作的东西，它就是那个，而不是与另一个js冲突......但是再一次，我真的不知道任何事情。 8 ^）

Answer 1

根据您使用的jQuery版本@ j08691的评论是否正确，因此.toggle()不会做太多。你可以这样做：

$('.titleRow').on('click', function(){

    $details = $(this).parent().next('.details');

    if($details.is(':visible')) {

        $details.hide();
    }
    else {

        $details.show();
    }
});

演示：http://jsfiddle.net/andyface/mwLRJ/

基本上，它绑定一个点击然后获取details元素，然后检查它是否可见并执行所需的操作。

你可以在详细信息部分使用slideToggle()，但我遇到的问题是切换没有做正确的事情，特别是如果你有另一种关闭内容的方法，比如关闭详细信息部分中的按钮，因此更容易明确您希望它做什么以及何时执行。

HTML格式的注释。我通常通过将它包装在一个切换容器中然后有一个触发器和一个目标来做这样的事情，如下所示：

<div class="toggle-container">
    <div class="parent-div">
        <div class="toggle-trigger">Click to show</div>
        <div>some other stuff</div>
    </div>
    <div>stuff</div>
    <div class="toggle-target" style="display:none;">CONTENT TO SHOW</div>
</div>

这样你可以做到

$('.toggle-target').on('click', function() {

    var $trigger = $(this),
        $container = $trigger.closest('.toggle-container'),
        $target = $container.find('toggle-target');

    if($target.is(':visible')) {

        $target.show();
        $trigger.text('Click to hide');
    }
    else {

        $target.hide();
        $trigger.text('Click to show');
    }
});

这使您可以更灵活地获取目标和触发器周围的内容，而不必担心始终将您的详细信息div保留在触发器父div旁边

Answer 2

在不更改HTML结构的情况下，我建议使用其他属性来确定要切换的详细信息。在下面的示例中，我对标题div使用数据详细信息属性，为详细信息div使用 id - 以匹配正确的部分：

HTML

<div class="item">
  <div class="titleRow" data-details="1">
    <h3 class="yesterday">Some text</h3>
    <h3 class="today">Some other text</h3>
  </div>
</div> <!-- /item (table) -->

<div class="details" id="1">
  <p>A long paragraph of description.</p>
</div>

<div class="item">
  <div class="titleRow" data-details="2">
    <h3 class="yesterday">Some text</h3>
    <h3 class="today">Some other text</h3>
  </div>
</div> <!-- /item (table) -->

<div class="details" id="2">
  <p>A long paragraph of description.</p>
</div>

JS

$('.titleRow').click(function() {
    var details_id = $(this).data('details');
    $('div[id="' + details_id + '"]').toggle();
});

PS。您不需要使用hide（）来获取详细信息div。简单的CSS显示：没有人会这样做。

带有评论的工作代码：http://jsfiddle.net/PhAhu/

Answer 3

.parent()获取元素的直接父级。要遍历祖先，您需要使用.closest()或.parents()。试试这个：

 $(this).closest('.item').next().slideDown();

或

 $(this).parents('.item').next().slideDown();

在Jquery中寻找父母的下一个兄弟

3 个答案: