2

読んでくれてありがとう！私は3つのdivを持っています。1 つはメニュー div です。これは、メニューをクリックして (表示/非表示)、表示されているときに div の外側をクリックして (非表示のみ)、切り替えるのが好きです。

他の 2 つの 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>

Jクエリ

  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 を閉じるにはどうすればよいですか? 他の 2 つの div は現在の状態のままにします。2. これを ios/android デバイスでも機能させるにはどうすればよいですか?

ありがとう！

4

2 に答える 2

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 の外側に移動します。次に大きな div で発生するイベント。したがって、小さい div のいずれかをクリックしても、menu_container のクリックは呼び出されません。ただし、子 div ではなく menu_container 内をクリックすると、他のイベントによって event.stopPropagation() が呼び出されなかったため、そのクリック関数が呼び出されます。

于 2013-01-23T11:40:44.487 に答える
0

OK、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 に答える