使用onclick上滑功能时的JQuery问题

Question

我在jquery中有用于向上滑动和向下滑动功能的脚本，并且每个都有一个按钮。两者都工作得很好，直到我想要放弃幻灯片，让用户点击站点中的任何地方。即，当用户点击向下滑动按钮时，其向下滑动，而当他稍后点击屏幕上的任何地方时，内容向上滑动。

不幸的是，当我点击向下滑动按钮时，它有一个自动滑下和滑上的小问题。

脚本如下：

<div id="a" name="a">
    </br>
    <small><p id="date2"><?php echo $row2["date"]; ?></p></small>
    <p><B><big><font color= #ba4a00> A:</font></B></big> <small><?php echo $row2["answer"]; ?></small></p>
</div>

<button id="showmoreless" class="hide">Hide Answers</button>
        <button id="showmoreless" class="show">Show Answers</button>

<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>

<script>
    $(document).ready(function(){
        $(".hide").hide();
        $('[name="a"]').slideUp();
        $(".show").click(function(e){
            e.preventDefault();
            $(this).parent().find('[name="a"]').slideDown();
            $(this).hide();
            $(this).parent().find(".hide").show();
        }); 

        $('[name="a"]').click(function(e){
            e.stopPropagation();
        });

        $(window).click(function(e) {
            console.log($(e.target));
            if (!$(e.target).is('[name="a"]')) {
                $('.show').show();
                $('[name="a"]').slideUp(); 
            }
        });

    });
</script>

任何帮助都将不胜感激..

Answer 1

它会立即返回，因为两个事件处理程序都在执行-根据定义，在show元素上单击也是在窗口上单击。

要阻止这种情况发生，您需要stopPropagation

​

$(".hide").hide();
$('[name="a"]').slideUp();
$(".show").click(function(e){
  e.preventDefault();
  $(this).parent().find('[name="a"]').slideDown();
  $(this).hide();
  $(this).parent().find(".hide").show();
  e.stopPropagation(); // <-- here
}); 

$('[name="a"]').click(function(e){
  e.stopPropagation();
});

$(window).click(function(e) {
  //console.log($(e.target));
  if (!$(e.target).is('[name="a"]')) {
    $('.show').show();
    $('[name="a"]').slideUp(); 
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="a" name="a">
    <br>
    <small><p id="date2">date here</p></small>
    <p><big><font color= #ba4a00> A:</font></big> <small>answer here</small></p>
</div>

<button id="showmoreless" class="hide">Hide Answers</button>
<button id="showmoreless" class="show">Show Answers</button>

​