第二次单击jQuery时，slideUp（）

Question

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

我尝试使用.data()来收集点击次数，但这种方法打破了我用jQuery应用的css（边框）。

＆＃13;

＆＃13;

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

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你可以尝试

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

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

DEMO

并且对于count，您可以使用此代码

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

Answer 2

试试这个。在这里我使用了bootstrap collapse

.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>

Answer 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>