jQuery slideToggle - 再次单击时隐藏/其他按钮

时间：2018-03-20 12:29:21

标签： javascript jquery html css

我创建了需要一些特定功能的切换按钮：

1）在第一次点击时显示内容（这可行）

2）单击其他按钮时隐藏内容（这可以）

3）在第二次点击时隐藏内容（这不起作用）

现在，如果您单击两次相同的按钮，则首先slideUp（因为如果您单击其他按钮，则需要关闭之前的内容）。一旦它上升，然后slideDown，使它非常跳跃。

有没有办法让所有3个功能都有效？ 删除＆＃34; $（＆＃34; .assortiment＆＃34）。效果基本show（）;＆＃34; line修复了这个跳跃的问题，但这也阻止了函数2的工作......

＆＃13;
＆＃13; 
function assortiment(e){
  var assortimentid = e.id + "__js";
  if ($("#" + assortimentid).display = "block"){
    $(".assortiment").slideUp();
    $("#" + assortimentid).slideToggle();
  } else if ($("#" + assortimentid).display = "none"){
    $("#" + assortimentid).slideToggle();
  }
}
＆＃13; 
.assortiment {
  display: none;
 }
 
.btn {
  border: 1px solid black;
  border-radius: 10px;
  padding: 10px;
  width: 100px;
  margin: 5px;
  background-color: lightblue;
 }
 .btn:hover {
   cursor: pointer
 }
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn" id="section1" onclick="assortiment(this)">Section 1</div>
  <div class="btn" id="section2" onclick="assortiment(this)">Section 2</div>
  <div class="btn" id="section3" onclick="assortiment(this)">Section 3</div>
  
  <div class="assortiment" id="section1__js">
    <p>SOME CONTENT 1</p>
    <p>Lorem ipsum dolor sit amet, aliquip apeirian dissentiunt ex pro. Ad choro facilis offendit mel, et quo quot democritum. Aliquip quaestio periculis ad eam, legere altera reprehendunt eu his. Cu has virtute pericula definitionem, cu facete conclusionemque has, cu errem accusamus duo.
</p>
  </div>
  <div class="assortiment" id="section2__js">
    <p>SOME CONTENT 2</p>
        <p>Lorem ipsum dolor sit amet, aliquip apeirian dissentiunt ex pro. Ad choro facilis offendit mel, et quo quot democritum. Aliquip quaestio periculis ad eam, legere altera reprehendunt eu his. Cu has virtute pericula definitionem, cu facete conclusionemque has, cu errem accusamus duo.
</p>
  </div>
  <div class="assortiment" id="section3__js">
    <p>SOME CONTENT 3</p>
        <p>Lorem ipsum dolor sit amet, aliquip apeirian dissentiunt ex pro. Ad choro facilis offendit mel, et quo quot democritum. Aliquip quaestio periculis ad eam, legere altera reprehendunt eu his. Cu has virtute pericula definitionem, cu facete conclusionemque has, cu errem accusamus duo.
</p>
  </div>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：1)

您缺少.stop()方法，该方法会停止匹配元素上当前正在运行的动画，或者换句话说，防止重复：

function assortiment(e){
  var assortimentid = e.id + "__js";
  if ($("#" + assortimentid).display = "block"){
    $(".assortiment").stop().slideUp();
    $("#" + assortimentid).stop().slideToggle();
  } else if ($("#" + assortimentid).display = "none"){
    $("#" + assortimentid).stop().slideToggle();
  }
}
* {margin: 0; box-sizing: border-box} /* addition; more "fluent" */

.assortiment {
  display: none;
}

.btn {
  border: 1px solid black;
  border-radius: 10px;
  padding: 10px;
  width: 100px;
  margin: 5px;
  background-color: lightblue;
}

.btn:hover {
  cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="btn" id="section1" onclick="assortiment(this)">Section 1</div>
<div class="btn" id="section2" onclick="assortiment(this)">Section 2</div>
<div class="btn" id="section3" onclick="assortiment(this)">Section 3</div>

<div class="assortiment" id="section1__js">
  <p>SOME CONTENT 1</p>
</div>
<div class="assortiment" id="section2__js">
  <p>SOME CONTENT 2</p>
</div>
<div class="assortiment" id="section3__js">
  <p>SOME CONTENT 3</p>
</div>

答案 1 :(得分：1)

尽量避免内联javascript ..为.btn编写一个单独的函数点击以切换显示...使用slideToggle() jQuery切换相同的元素...和slideUp() not()隐藏其他元素

还可以使用===进行条件比较，... =用于分配值...

element.display = "none"也不是有效的陈述，应该像element.css("display") === "none"

＆＃13;
＆＃13; 
$(".btn").on("click", function() {
  var item = "#" + $(this).attr("id") + "__js"
  $(".assortiment").not(item).stop().slideUp();
  $(item).stop().slideToggle();
})
＆＃13; 
.assortiment {
  display: none;
}

.btn {
  border: 1px solid black;
  border-radius: 10px;
  padding: 10px;
  width: 100px;
  margin: 5px;
  background-color: lightblue;
}

.btn:hover {
  cursor: pointer
}

p {
  margin: 0;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn" id="section1">Section 1</div>
<div class="btn" id="section2">Section 2</div>
<div class="btn" id="section3">Section 3</div>

<div class="assortiment" id="section1__js">
  <p>SOME CONTENT 1</p>
</div>
<div class="assortiment" id="section2__js">
  <p>SOME CONTENT 2</p>
</div>
<div class="assortiment" id="section3__js">
  <p>SOME CONTENT 3</p>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

试试这个

function assortiment(e){
  var assortimentid = e.id + "__js";
  if ($("#" + assortimentid).display == "block"){
    $(".assortiment").hide();
    $("#" + assortimentid).slideToggle();
  } else if ($("#" + assortimentid).display == "none"){
    $("#" + assortimentid).slideToggle();
  }

答案 3 :(得分：0)

将JS函数定义更新为：

function assortiment(e){
  var assortimentid = e.id + "__js";
  $(".assortiment").not("#" + assortimentid).slideUp();
  $("#" + assortimentid).slideToggle(); 
}

完整代码段和jsFiddle 

function assortiment(e){
  var assortimentid = e.id + "__js";
  $(".assortiment").not("#" + assortimentid).slideUp();
  $("#" + assortimentid).slideToggle(); 
}
.assortiment {
  display: none;
 }
 
.btn {
  border: 1px solid black;
  border-radius: 10px;
  padding: 10px;
  width: 100px;
  margin: 5px;
  background-color: lightblue;
 }
 .btn:hover {
   cursor: pointer
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn" id="section1" onclick="assortiment(this)">Section 1</div>
  <div class="btn" id="section2" onclick="assortiment(this)">Section 2</div>
  <div class="btn" id="section3" onclick="assortiment(this)">Section 3</div>
  
  <div class="assortiment" id="section1__js">
    <p>SOME CONTENT 1</p>
    <p>Lorem ipsum dolor sit amet, aliquip apeirian dissentiunt ex pro. Ad choro facilis offendit mel, et quo quot democritum. Aliquip quaestio periculis ad eam, legere altera reprehendunt eu his. Cu has virtute pericula definitionem, cu facete conclusionemque has, cu errem accusamus duo.
</p>
  </div>
  <div class="assortiment" id="section2__js">
    <p>SOME CONTENT 2</p>
        <p>Lorem ipsum dolor sit amet, aliquip apeirian dissentiunt ex pro. Ad choro facilis offendit mel, et quo quot democritum. Aliquip quaestio periculis ad eam, legere altera reprehendunt eu his. Cu has virtute pericula definitionem, cu facete conclusionemque has, cu errem accusamus duo.
</p>
  </div>
  <div class="assortiment" id="section3__js">
    <p>SOME CONTENT 3</p>
        <p>Lorem ipsum dolor sit amet, aliquip apeirian dissentiunt ex pro. Ad choro facilis offendit mel, et quo quot democritum. Aliquip quaestio periculis ad eam, legere altera reprehendunt eu his. Cu has virtute pericula definitionem, cu facete conclusionemque has, cu errem accusamus duo.
</p>
  </div>

相关问题
最新问题