Question

我正在尝试使用jQuery创建一个显示/隐藏切换按钮。它似乎工作，直到我关闭按钮所在的div，使两个元素在不同的div。

例如，以下作品：

<div class="col span_1_of_3">
    <button class="reveal">Show Filters</button>

    <div class="filter-hide">
        <p>CONTENT</p>
    </div>
</div>

但是这段代码没有：

<div class="col span_1_of_3">
    <button class="reveal">Show Filters</button>
</div> <!-- THIS CLOSING DIV HAS BEEN ADDED -->

<div class="filter-hide">
    <p>CONTENT</p>
</div>

JQuery如下：

$(".filter-hide").hide(); 
$("button.reveal").click(function(){
    $(this).toggleClass("active").next().slideToggle();

    if ($.trim($(this).text()) === 'Show Filters') {
        $(this).text('Hide Filters');
    } else {
        $(this).text('Show Filters');        
    }

    return false; 
});

任何人都可以告诉我为什么会这样，以及如何解决它？我这样做的原因是因为我需要按钮为页面的1/3，然后内容显示下面的全宽。我可以解决它，但后来遇到其他问题。

提前致谢。

Answer 1

您可以使用.closest()遍历父div，然后使用.next()定位其兄弟。

$("button.reveal").click(function () {
    $(this).closest('div').next().slideToggle();
    $(this).toggleClass("active");

    //Rest of code
});

$("button.reveal").click(function() {
  $(this).closest('div').next().slideToggle();
  $(this).toggleClass("active");

  //Rest of code
  if ($.trim($(this).text()) === 'Show Filters') {
    $(this).text('Hide Filters');
  } else {
    $(this).text('Show Filters');
  }

  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col span_1_of_3">
  <button class="reveal">Show Filters</button>
</div>
<!-- THIS CLOSING DIV HAS BEEN ADDED -->

<div class="filter-hide">
  <p>CONTENT</p>
</div>

Answer 2

您正在使用.next()获取下一个兄弟。因为它不再是兄弟姐妹，所以它不再找到它。

如果控件/内容位于不同的位置，最好的选择是将它们配对。您可以使用类或data-属性执行此操作，例如：

<div>
    <button class="reveal" data-content='filter1'>Show Filters</button>
</div>

<div class="filter-hide" data-filter='filter1'>
    <p>CONTENT</p>
</div>

然后您的按钮点击代码将是：

$("button.reveal").click(function() {
    var filter = $(this).data("content");
    $(this).toggleClass("active");

    $(".filter-hide[data-filter=" + filter + "]").slideToggle();

使用该模式，您可以添加/删除按钮和内容，而无需更改您的javascript以单独处理它们，更重要的是，如果您再次更改HTML，则无需更改您的JavaScript必须如果你使用任何形式的遍历（例如.closest（）。next（）。如果这种情况，find（）会起作用，但如果你改变了html则不行。）

Answer 3

由于您使用next()来到另一个按钮，因此关闭第一个按钮上的div不再使其可用。因此，无论您将div放在何处，都可以将div作为目标，请使用以下命令：

$("button.reveal").click(function(){
    $(this).toggleClass("active");
    $('.filter-hide').slideToggle(); //Change here.

    if ($.trim($(this).text()) === 'Show Filters') {
        $(this).text('Hide Filters');
    } else {
        $(this).text('Show Filters');        
    }

    return false; 
});

当元素在单独的div中时，如何使toggleClass jQuery工作？

3 个答案: