第二次单击jQuery时的slideUp（）答案

【问题标题】：slideUp() on second click jQuery第二次单击jQuery时的slideUp（）
【发布时间】：2016-02-01 01:32:40
【问题描述】：

我如何在第二次点击时slideUp() li 元素？

我尝试使用.data() 收集点击次数，但这种方法破坏了我在 jQuery 中应用的 css(border)。

var paragraph = $('p');
var paragraphParent = $('li');

paragraph.addClass('displayNone');
    
paragraphParent.on('click', function () {
paragraph.stop().slideUp();
$(this).children().stop().slideDown();
});

.displayNone{
    display:none;
}

ul{
    list-style-type: none;   
    padding: 0;
    margin: 0;
}

li{
    width: 200px;
    font-size: 20px;
    background-color: lightblue;
    color: black;
    text-align: center;
    margin-top: 5px;
    padding-bottom: 3px;
}

li:hover{
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li>Item 1
        <p>Lorem ipsum...</p>
    </li>
    <li>Item 2
        <p>Lorem ipsum...</p>
    </li>
    <li>Item 3
        <p>Lorem ipsum...</p>
    </li>
    <li>Item 4
        <p>Lorem ipsum...</p>
    </li>
</ul>

【问题讨论】：

统计点击次数的代码在哪里？我认为这种尝试会更相关。
你试过用slideToggle吗？
是的，这种行为真的很奇怪，因为它用段落文本替换了任何“项目”。 @乔恩var $this = $(this); var clickCount = ($this.data("click-count") || 0) + 1; $this.data("click-count", clickCount);
只使用引导折叠代替

标签： javascript jquery animation slide

【解决方案1】：

你可以试试

    paragraphParent.on('click', function () {
        paragraph.not($(this).children('p')).slideUp();
        $(this).children().slideToggle();
    });

   paragraph.on('click', function (e) {
       e.stopPropagation();
   });

DEMO

为了计数，您可以使用此代码

var paragraph = $('p');
var paragraphParent = $('li');

paragraph.addClass('displayNone');
 paragraphParent.on('click', function () {
    paragraph.not($(this).children('p')).slideUp();
    $(this).children().slideToggle();
     // count number of clicks
     var click_num = parseInt($(this).attr('data-count'));
     $(this).attr('data-count' , click_num + 1);
     alert($(this).attr('data-count'));

});
paragraph.on('click', function (e) {
   e.stopPropagation();
});

DEMO

【讨论】：

我已经尝试过了，但它正在替换不在<p></p> + 中的所有内容，有时它会中断并且不显示任何内容，例如没有标题的空矩形。
@nehel 这就是你想要的吗？？ jsfiddle.net/mohamedyousef1980/hgwmLp4o ..你可以查看我更新的答案和演示
嗯，是的，看来我必须删除我的标题，因为我忘了添加我的 sn-p 它们...jsfiddle.net/hgwmLp4o/2
@nehel 您还可以通过新演示看到更新的答案.. 它可能有助于您想要的计数.. 祝你好运:)
是的，已经对 html 和 css 进行了一些修改，而且效果很好，谢谢先生 :)

【解决方案2】：

试试这个。这里我使用了引导折叠

.displayNone {
    display:none;
}
ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
li {
    width: 200px;
    font-size: 20px;
    background-color: lightblue;
    color: black;
    text-align: center;
    margin-top: 5px;
    padding-bottom: 3px;
}
li:hover {
    cursor: pointer;
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
    <ul>
        <li data-toggle="collapse" data-target="#demo1"><a>Item 1</a>

            <p class="collapse" id="demo1">Lorem ipsum...</p>
        </li>
        <li data-toggle="collapse" data-target="#demo2"><a>Item 2</a>

            <p class="collapse" id="demo2">Lorem ipsum...</p>
        </li>
        <li data-toggle="collapse" data-target="#demo3"><a>Item 3</a>

            <p class="collapse" id="demo3">Lorem ipsum...</p>
        </li>
    </ul>
</div>

【讨论】：

我的想法是不输入id，因为我有大约20 个li 元素，但我肯定会记住这一点，以用于更小的项目！谢谢！另一方面，当折叠的项目向上滑动时，我看到有一点反弹效果。是故意的吗？
是的，它很酷。我只是建议您使用简单的方法，因为您给出的示例中只有 4 个
。

抱歉，我不知道这种效果。

【解决方案3】：

您可以使用 jQuery .data API，正如您所尝试的那样。

$(function() {
  $('ul li').find('p').hide();

  $('ul').on('click', 'li', function() {
    var count = $(this).data('count') + 1;
    $(this).data('count', count)
    if (count == 2) {
      $(this).data('count', 0).find('p').stop().slideDown();
      $('ul li').not(this).find('p').slideUp();
    }
  })
})

.displayNone {
  display: none;
}
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
li {
  width: 200px;
  font-size: 20px;
  background-color: lightblue;
  color: black;
  text-align: center;
  margin-top: 5px;
  padding-bottom: 3px;
}
li:hover {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li data-count="0">Item 1
    <p>Lorem ipsum...</p>
  </li>
  <li data-count="0">Item 2
    <p>Lorem ipsum...</p>
  </li>
  <li data-count="0">Item 3
    <p>Lorem ipsum...</p>
  </li>
  <li data-count="0">Item 4
    <p>Lorem ipsum...</p>
  </li>
</ul>

【讨论】：