Question

我在{{1}中有以下简单的slideToggle，也可以在jQuery here中找到：

JSFiddle

$(document).ready(function () {
    $(".panel_button").on('click', function () {
        $(this).next('.panel').slideToggle(0);
        $(this).toggleClass('active');
    });
});

.buttons {
  background-color: green;
  float: left;
  width: 100%;
}

.panel_button {
  float: left;
  width: 30%;
}

.panel {
  background-color: blue;
  float: left;
  width: 100%;
  display: none;
}

您可以在代码中看到，我的目标是拥有三个<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="panel"> <div class="content_01a">Here goes content1a</div> <div class="content_01b">Here goes content1b</div> </div> <div class="panel"> <div class="content_02a">Here goes content2a</div> <div class="content_02b">Here goes content2b</div> <div class="content_02c">Here goes content2c</div> </div> <div class="panel"> <div class="content_03a">Here goes content2a</div> <div class="content_03b">Here goes content2b</div> </div> <div class="buttons"> <div class="panel_button"> Button_01 </div> <div class="panel_button"> Button_02 </div> <div class="panel_button"> Button_03 </div> </div>，一旦单击.buttons，就会显示相应的.button。
例如，当您单击.contents时，应打开带有.button_01和.panel的{{1}}。

因此，我尝试使用jQuery .content_01a函数，但是似乎只有在.content_01b直接位于每个slideToggle下方的情况下，该函数才有效。但是，在上面的结构中，我需要将.panel放在所有的button下方。

如何更改代码才能使其正常工作？

Answer 1

您需要具有数据目标，才能使点击与面板对齐，然后可以添加自己的逻辑，

这是我对每个面板添加的data-target属性和ids所做的更改

您可以阅读here，了解如何使用引导程序。

$(document).ready(function() {
  $(".panel_button").on('click', function() {
 
    var targetPanel = $(this).attr('data-target');
    if(!$(targetPanel).is(":visible")){
      $(".panel").slideUp();          
    }
    $(targetPanel).slideToggle(0);
    $(this).toggleClass('active');
  });
});

.buttons {
  background-color: green;
  float: left;
  width: 100%;
 
}

.panel_button {
  float: left;
  width: 30%;
   border:1px solid white;
}

.panel {
  background-color: blue;
  float: left;
  width: 100%;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panel1" class="panel">
  <div class="content_01a">Here goes content1a</div>
  <div class="content_01b">Here goes content1b</div>
  Panel1
</div>

<div id="panel2" class="panel">
  <div class="content_02a">Here goes content2a</div>
  <div class="content_02b">Here goes content2b</div>
  <div class="content_02c">Here goes content2c</div>
  Panel2
</div>

<div id="panel3" class="panel">
  <div class="content_03a">Here goes content2a</div>
  <div class="content_03b">Here goes content2b</div>
  Panel3
</div>


<div class="buttons">
  <div class="panel_button" data-target="#panel1"> Button_01 </div>
  <div class="panel_button" data-target="#panel2"> Button_02 </div>
  <div class="panel_button" data-target="#panel3"> Button_03 </div>
</div>

Answer 2

您可以在面板上添加一个ID
您可以将面板包装成两个单独的容器。并使用单击的按钮的索引来切换面板包装中的相应面板。 这样，您无需每次都指定面板ID，并且更加灵活

$(document).ready(function () {
    $(".panel_button").on('click', function () {
        const buttonIndex = $(this).index();
        $(".panels").children().eq(buttonIndex).slideToggle(0);
        $(this).toggleClass('active');
    });
});

.buttons {
  background-color: green;
  float: left;
  width: 100%;
}

.panel_button {
  float: left;
  width: 30%;
}

.panel {
  background-color: blue;
  float: left;
  width: 100%;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panels">
  <div class="panel">
    <div class="content_01a">Here goes content1a</div>
    <div class="content_01b">Here goes content1b</div>
  </div>

  <div class="panel">
    <div class="content_02a">Here goes content2a</div>
    <div class="content_02b">Here goes content2b</div>
    <div class="content_02c">Here goes content2c</div>
  </div>

  <div class="panel">
    <div class="content_03a">Here goes content3a</div>
    <div class="content_03b">Here goes content3b</div>
  </div>
</div>

<div class="buttons">
  <div class="panel_button"> Button_01 </div>
  <div class="panel_button"> Button_02 </div>
  <div class="panel_button"> Button_03 </div>
</div>

Answer 3

这可能会对您有所帮助。我已经编写了代码，因此使用简单的IF-其他条件一次只能看到一个面板。

$(document).ready(function() {
  $(".panel_button").on('click', function() {
    $(".panel").slideUp();
    var targetPanel = $(this).attr('data-target');
    if($(targetPanel).hasClass('active')){
      $(targetPanel).removeClass('active').slideUp();
    }else{
      $(".panel").removeClass('active');
      $(targetPanel).addClass('active').slideDown();
    }
  });
});

.buttons {
  background-color: green;
  float: left;
  width: 100%;
}

.panel_button {
  float: left;
  width: 30%;
}

.panel {
  background-color: blue;
  float: left;
  width: 100%;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel" id="panel1">
  <div class="content_01a">Here goes content1a</div>
  <div class="content_01b">Here goes content1b</div>
</div>

<div class="panel" id="panel2">
  <div class="content_02a">Here goes content2a</div>
  <div class="content_02b">Here goes content2b</div>
  <div class="content_02c">Here goes content2c</div>
</div>

<div class="panel" id="panel3">
  <div class="content_03a">Here goes content3a</div>
  <div class="content_03b">Here goes content3b</div>
</div>


<div class="buttons">
  <div class="panel_button" data-target="#panel1"> Button_01 </div>
  <div class="panel_button" data-target="#panel2"> Button_02 </div>
  <div class="panel_button" data-target="#panel3"> Button_03 </div>
</div>

单击时显示/隐藏按钮上方的内容

3 个答案: