javascript - 在第二次单击jQuery上的slideUp()

我如何在第二次点击时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>

最佳答案

你可以试试

    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

关于javascript - 在第二次单击jQuery上的slideUp()，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33456069/