0

だから私は自分のサイトにスライドアウトメニューを作っているところです。クリックするとスライドアウトしますが、別のクリックでスライドインするように設定するにはどうすればよいですか?

現在の非常に単純なソース コード:

$(document).ready(function() {
   $("#menuicon").click(function() {
      $("nav ul, .content").animate({left: "-15%"}, 1000);
   });
});

前もって感謝します！

4

5 に答える 5

1

このシンプルなスライド アウト メニューを確認してください。

デモhttp://jsfiddle.net/yeyene/TLtqe/1/

$('a').on('click',function() {
    if($('#website').css('left')=='0px'){
        $('#website').animate({left: '-30%'}, 1000);        
    }else{
        $('#website').animate({left:0}, 1000); 
    }
});
于 2013-07-02T03:09:57.930 に答える
1

クリックの代わりに toggle() 関数を使用することもできますが、私はトグルの大ファンではありません。以下のソリューションにもクラスが組み込まれていますが、これが私が行う方法です。

$(document).ready(function() {
  $("#menuicon").click(function(e) {
    var menuicon = $(e.target);

    if (!menuicon.hasClass('open'){
      menuicon.addClass('open');
      $("nav ul, .content").animate({left: "-15%"}, 1000);
    } else {
      menuicon.removeClass('open');
      $("nav ul, .content").animate({left: "0"}, 1000);
    }
  });
});

ダブルクリックを防ぐために「ワーキング」クラスも組み込みますが、それはプロジェクトで必要以上のものになる可能性があります。

編集：

いくつかの異なるオブジェクト (アンカー、img とスパン、またはその中の他の要素など) を含む複雑なメニュー オプションがある場合、私がかなり使用するちょっとした追加情報です。e.target とjquery 'closest()' 関数を使用して、その子の 1 つではなく、常にアンカーを選択していることを確認してください。

var clicked = $(e.target).closest('a');

これは、クリックしたオブジェクトから属性値もフェッチしようとしている場合に非常に役立ちます。これを使用すると、選択が常に「a」になることが確実にわかります (e.target が子 img などを返すのではなく)。そこから作業できます。

于 2013-07-02T00:36:35.680 に答える
0

こんなもの使えませんか？

  $(document).ready(function() {
      $(".nav_button").click(function () {
      $(".top.mini_nav").slideToggle();
      });
      });

ここでこれを使用しています-> DEMO

そして、これは私がそのボタンに使用するCSSです

.top.mini_nav {
display: none;
top: 20px;
left: 20px;
margin-bottom: 60px;
position: relative;

}
.top.mini_nav a:hover {
background-color: #F8F8F8;
}
.nav_button {
position: relative;
width: 40px;
height: 40px;
left: 40px;
display: block;
color: white;
background-color: #2898F2;
font-size: 20px;
font-weight: bold;
text-align: center;
line-height: 39px;
cursor: pointer;
top: 20px;
border-radius: 5px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.nav_button:hover {
background-color: #D0A624;
}

おそらくもっときれいなものが欲しいでしょうが、これは今のところうまくいきます。

于 2013-07-02T01:41:09.130 に答える
0

開いているかどうかに応じて、自分自身を true/false に設定する変数を作成するだけでよいことに気付きました。

var open = false;

$(document).ready(function() {
   $("#menuicon").click (function() {
      if (!open){
         $(".content, nav ul").animate({left: "-=15%"}, 1000);
         open = true;
      } else {
         $(".content, nav ul").animate({left: "+=15%"}, 1000);
         open = false;
      }
   });
});

みんな助けてくれてありがとう！

于 2013-07-02T23:31:40.060 に答える
0

代わりに jquery スライドトグルを使用してください! たとえば、$(document).ready(function() { $("#menuicon").click(function() { $("nav ul, .content").slideToggle(1000); }); });アニメーションの代わりに！

于 2013-07-02T00:35:18.940 に答える