3

ドロップダウンメニューで選択したボタン（色）を、クリックすると固執するようにしています。現在、メニューで選択した色が何であれ、スライドして元に戻り、デフォルトで青になります。ご協力ありがとうございました！

ここに私のクエリがあり、フィドルは以下のとおりです。

var nav = $("#catpicker");  
//add indicators and hovers to submenu parents  
nav.find("li").each(function() {  
  if ($(this).find("ul").length > 0) {    
      //show subnav on hover  
      $(this).mouseenter(function() {  
          $(this).find("ul").stop(true, true).slideDown();  
      });  
      //hide submenus on exit  
      $(this).mouseleave(function() {  
          $(this).find("ul").stop(true, true).slideUp();  
      });  
  }  
});

})(jQuery);

http://jsfiddle.net/davidzupec/xcCNK/1/

4

4 に答える 4

2 
$(function(){

var hover =true;
var isClicked = false;

$("#menu").hover(
    function(){
        if(hover && !isClicked){
        $("#submenu").animate({height:"235px"});
        $("#submenu").on('click', 'li', function(){
            $(this).siblings('li').hide();
            $(this).addClass('clicked').siblings('li').removeClass('clicked');
            hover = false;
            isClicked = true;
            });
        }
        else {

        $(".active").show();
        $("#submenu").animate({height:"235px"});
        };

    },
        function(){
        if(isClicked){
        $("#submenu").animate({height:"55px"},500, function(){
                $(".clicked").show().siblings('li').hide();
        });

        }
        else
        {
        $("#submenu").animate({height:"55px"});
        }



        }

);

});

http://jsfiddle.net/akman/Jy7ue/ css/html の変更が必要な場合はフィドルをチェックしてください

あなたの問題は、ホバーとクリックの状態を何らかの制御する必要があったことでした。これは、それぞれに変数を使用し、ifステートメントの内部をtrueまたはfalseでチェックすることで実現できます...これが役に立ち、説明できることを願っています

于 2013-06-26T12:50:59.290 に答える
0

このようなことですか？

$(document).ready(function($){  
var nav = $("#catpicker"), bool = true, bool2 = true;  
nav.find("li").each(function() {  
  if ($(this).find("ul").length > 0) {     
      $(this).mouseenter(function() {  
          if(bool2)
          {
              $(this).find("ul").stop(true, true).slideDown();  
              bool = false;
          }
      });  
      $("img").click(function() {
           bool = true;
           bool2 = false;
           $(this).find("ul").stop(true, true);
       }); 
      $(this).mouseleave(function() {  
          if(bool == false)
          {
              $(this).find("ul").stop(true, true).slideUp();  
          }
      });  
  }  
});

})(jQuery);

編集あなたの意味を理解したので、ここにあなたが望むものがあります.htmlをいくつか変更してそれに合わせました

$(document).ready(function($){  
  var nav = $("#catpicker"), bool = true, bool2 = true;  
  $("li").click(function() {
      $(".first").removeClass("first");
      $(this).addClass("first");
      var current = $(this);
      current.prev().prev().before(current);
      current.prev().before(current);
  });

  if (nav.find("ul").length > 0) {     
      $(this).mouseenter(function() {  
          $("ul li").css("visibility", "visible");
      });  

  $(this).mouseleave(function() {  
      $(this).find("ul li").not(".first").stop(true, true).slideUp().css("visibility", "hidden").slideDown();  
  });  
  }  

})(jQuery);
于 2013-06-26T12:22:36.417 に答える
0

HTML を少し変更しました (画像を読み込めませんでした) が、jQuery コードとは関係ありません: JSFiddle

基礎となるli要素をクリックすると、クリックされたli場所が最初の (トップレベルの) 場所と入れ替わります

first.find("li").click(function () {
    var ul = first.children("ul");
    var clicked = $(this);
    ul.remove();
    first.after(clicked);
    clicked.append(ul);
    ul.append(first);
    clicked.mouseleave(function () {
        $(this).find("ul").stop(true, true).slideUp();
    });
    clicked.mouseenter(function () {
        $(this).find("ul").stop(true, true).slideDown();
    });
    clicked.click(function () {
        // TODO: Reassign click to new toplevel item
    });
});

行う必要があるのは、クリック イベントを新しいトップレベルに再割り当てすることだけです。li

于 2013-06-26T13:06:55.053 に答える
0

質問が正しく理解できたことを願っています。このコードは、示されているように正方形を選択し、メニューを上にスライドさせます。

$(document).ready(function($){  
    // initial: the first item from the list
    $('#static').html($('#allcat').html());
    $('#static').css("background-color",$('#allcat').parent().css("background-color"));
    // replace static item with clicked
    $('#items li').click(function(){
        $('#static').html($(this).html());
        $('#static').css("background-color",$(this).css("background-color"));
    });
    // mouse events
    $('#container').mouseenter(function(){
        $('#items').slideDown();
    });
    $('#items').mouseleave(function(){
        $('#items').slideUp();
    });

})(jQuery);

html構造を変更しました。ここを見てください： http://jsfiddle.net/xcCNK/9/

于 2013-06-26T12:59:56.290 に答える