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 语句是真是假......希望这有助于并解释

于 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

我希望，我理解的问题是正确的。此代码将选择一个如图所示的正方形，然后向上滑动菜单：

$(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 回答
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 回答