android - 3 div 的 : 2 toggles, 1 在 ios 上用外部点击关闭切换

Question

感谢阅读和帮助!我有 3 个分区。一个是菜单 div，我喜欢通过单击菜单(显示/隐藏)和在显示的 div 外部单击(仅隐藏)来切换它。

另外两个 div 是额外的信息 div，只能通过切换来显示/隐藏。当您在显示的 div 之外单击时，我不希望它们关闭。

这是设置:HTML

<a id="menu_slide">MENU</a>    
<div id="menu_info"><a href="#">HOME</a> | <a href="#">PROFILE</a> | <a href="#">FORUM</a></div>
<br><br>
<a id="nextpart_slide">TOGGLE 1</a>
<div id="nextpart_info">Hello bla bla bla</div>

<a id="nextpart_slide2">TOGGLE 2</a>
<div id="nextpart_info2">Hello bla bla bla</div>

JQUERY

  jQuery(document).ready(function(){
  jQuery('#menu_slide').click(function () {
      jQuery('#menu_info').slideToggle('2000',"swing", function () {
      });
  });

  jQuery('#nextpart_slide').click(function () {
      jQuery('#nextpart_info').slideToggle('2000',"swing", function () {
      });
  });

  jQuery('#nextpart_slide2').click(function () {
      jQuery('#nextpart_info2').slideToggle('2000',"swing", function () {
      });
  });


});

参见:http://jsfiddle.net/HSdaG/1/因此非常基本的切换功能，但问题是:1.点击div外部时如何关闭菜单div？同时将其他两个 div 保持在当前状态。2. 如何使它在 ios/android 设备上也能正常工作？

谢谢!

Answer 1

HTML

<div id="menu_container">
    <a id="menu_slide">MENU</a>    
    <div id="menu_info"><a href="#">HOME</a> | <a href="#">PROFILE</a> | <a href="#">FORUM</a></div>
    <br><br>
    <a id="nextpart_slide">TOGGLE 1</a>
    <div id="nextpart_info">Hello bla bla bla</div>

    <a id="nextpart_slide2">TOGGLE 2</a>
    <div id="nextpart_info2">Hello bla bla bla</div>
</div>

jQuery

jQuery(document).ready(function(){
    jQuery('#menu_container').click(function (event) {
        //code goes here
    });

    jQuery('#menu_slide').click(function (event) {
        jQuery('#menu_info').slideToggle('2000',"swing", function () {
        });
        event.stopPropagation();
    });

    jQuery('#nextpart_slide').click(function (event) {
        jQuery('#nextpart_info').slideToggle('2000',"swing", function () {
        });
        event.stopPropagation();
    });

    jQuery('#nextpart_slide2').click(function (event) {
        jQuery('#nextpart_info2').slideToggle('2000',"swing", function () {
        });
        event.stopPropagation();
    });
});

您必须让 menu_container 比其他 div 大。当您在其他 div 内部单击时会发生什么情况，事件首先在最小的 div 内触发，然后它到达它所在的 div 外部，等等。通过调用 event.stopPropagation()，您可以防止在下一个最大的 div 中触发的事件。因此，如果您在任何较小的 div 中单击，则不会调用 menu_container 中的单击。但是，如果您在 menu_container 内部单击而不是在子 div 中单击，那么它的单击函数将被调用，因为 event.stopPropagation() 没有被其他事件调用。