1

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

我有以下 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();

});

（我会假设）强制所有 .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^)

4

3 回答 3

0

在不更改您的 HTML 结构的情况下，我建议使用其他属性来确定要切换的详细信息。在下面的示例中，我对标题 div使用data-details属性，对详细信息 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。您不需要对详细信息 div 使用 hide()。简单的 CSS 显示：没有人会这样做。

带有注释的工作代码：http: //jsfiddle.net/PhAhu/

于 2014-05-06T00:02:00.443 回答
0

根据您使用的 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/

本质上，它绑定了一次点击，然后获取详细信息元素，然后检查它是否可见并执行所需的操作。

您可以只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 旁边

于 2014-05-05T19:43:44.590 回答
-2

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

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

或者

 $(this).parents('.item').next().slideDown();
于 2014-05-05T16:41:16.340 回答