2

感谢阅读和帮助！我有3个div。一个是菜单 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(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 设备上也能做到这一点？

谢谢！

4

2 回答 2

0

好的，感谢 rweichler 我想通了。这是工作的 jQuery 代码。

jQuery(document).ready(function(){
   jQuery('html').click(function() {
       jQuery('#menu_info').hide(); 
});

    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();
    });
});

在工作中查看它：http: //jsfiddle.net/HSdaG/4/

谢谢！

于 2013-01-24T11:29:21.043 回答
0

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 中单击，则将调用其 click 函数，因为 event.stopPropagation() 未被其他事件调用。

于 2013-01-23T11:40:44.487 回答