Question

我只是试图获取我在下拉菜单中选择的任何按钮（颜色），以便在点击后粘贴。现在，无论我选择哪种颜色，菜单都会向上滑动，默认为蓝色。谢谢你的帮助！

继承人我的询问和小提琴如下：

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/

Answer 1

$(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语句是真还是假...希望这有助于解释< / p>

Answer 2

你的意思是this吗？

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

编辑既然我理解了你的意思，here就是你想要的，我改变了一些非常适合它的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);

Answer 3

我希望，我认为这个问题是正确的。此代码将选择一个正方形，而不是滑动菜单：

$(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/

Answer 4

我已经改变了一些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
    });
});

唯一需要做的就是将click事件重新分配给新的顶级li

获取图像按钮下拉菜单以在选中时粘贴

4 个答案: