菜單元素可以在菜單中點擊

我有一個菜單，通過點擊其中的一個元素，它會執行一個移動動畫，並加上單擊的元素，以及懸停在元素上時不透明度的變化。但是我注意到，如果我點擊菜單而不是一個on元素或將鼠標懸停在它上面，菜單動畫（元素的移動被激活，點擊的突出顯示和懸停的不透明度）都會被激活。任何幫助？菜單元素可以在菜單中點擊

JSFIDDLE

HTML：

<div id="menu" class="menu"> 
    <ul class="headlines"> 
     <li id="item1"><button>aa</button></li> 
     <li id="item2"><button>A</button></li> 
     <li id="item3"><button>B  </button></li> 
     <li id="item4"><button>C   </button></li> 
     <li id="item5"><button>D </button></li> 
     <li id="item6"><button>E  </button></li> 
     <li id="item7"><button>F  </button></li> 
    </ul> 
</div>

CSS：

li { 
    list-style-type: none; 
    font-size: 1.5em; 
    padding-top: 8px; 
    text-align:center; 
    border-style: none; 
} 


.menu li { 
    position: relative; 
    top: 180px; 
    left: 0px; 
} 
#item7 { 
    transition: opacity .8s, left .8s ease-out; 
    -moz-transition: opacity .8s, left .8s ease-out; 
    -webkit-transition: opacity .8s, left .8s ease-out; 
    -o-transition: opacity .8s, left .8s ease-out; 
    margin-left:105px 
} 
#item6 { 
    transition: opacity 1s, left 1s ease-out; 
    -moz-transition: opacity 1s, left 1s ease-out; 
    -webkit-transition: opacity 1s, left 1s ease-out; 
    -o-transition: opacity 1s, left 1s ease-out; 
    margin-left: 95px; 
} 
#item5 { 
    transition: opacity 1.2s, left 1.2s ease-out; 
    -moz-transition: opacity 1.2s, left 1.2s ease-out; 
    -webkit-transition: opacity 1.2s, left 1.2s ease-out; 
    -o-transition: opacity 1.2s, left 1.2s ease-out; 
    margin-left: 60px; 
} 
#item4 { 
    transition: opacity 1.4s, left 1.4s ease-out; 
    -moz-transition: opacity 1.4s, left 1.4s ease-out; 
    -webkit-transition: opacity 1.4s, left 1.4s ease-out; 
    -o-transition: opacity 1.4s, left 1.4s ease-out; 
    margin-left: 123px; 
} 
#item3 { 
    transition: opacity 1.6s, left 1.6s ease-out; 
    -moz-transition: opacity 1.6s, left 1.6s ease-out; 
    -webkit-transition: opacity 1.6s, left 1.6s ease-out; 
    -o-transition: opacity 1.6s, left 1.6s ease-out; 
    margin-left: 113px; 
} 
#item2 { 
    transition: opacity 1.8s, left 1.8s ease-out; 
    -moz-transition: opacity 1.8s, left 1.8s ease-out; 
    -webkit-transition: opacity 1.8s, left 1.8s ease-out; 
    -o-transition: opacity 1.8s, left 1.8s ease-out; 
    margin-left: 130px; 
} 
#item1 { 
    transition: opacity 2s, left 2s ease-out; 
    -moz-transition: opacity 2s, left 2s ease-out; 
    -webkit-transition: opacity 2s, left 2s ease-out; 
    -o-transition: opacity 2s, left 2s ease-out; 
    margin-left: 117px; 
} 

#item1>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;} 
#item2>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;} 
#item3>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;} 
#item4>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;} 
#item5>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;} 
#item6>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;} 
#item7>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;} 

.permahover li { 
    opacity: 1; 
    left: -33%; 
} 
.headlines li { 
    font-size:1.5em; 
    color:#000000; 
    transition: all 0.5s; 
    cursor: pointer; 
} 
.headlines:hover li, .headlines.active li { 
    /* PARENT HOVER */ 
    opacity:0.4; 
    cursor: pointer; 
    /* Dim all */ 
} 
.headlines li:hover, .headlines li.active { 
    /* SINGLE HOVER */ 
    opacity: 1; 
    /* Max one */ 
    color:#000000; 
    cursor: pointer; 
}

JQUERY：

$(".menu").on("click", function() { 
    $(".menu").addClass('permahover'); 

}); 


var $li = $('.headlines li').click(function() { 
    var state = !$(this).hasClass('active'); 
    $(this).parent().toggleClass('active', state); 

    $li.removeClass('active'); 
    $(this).toggleClass('active', state); 
});

來源

2015-06-29 mikeb

您可以設置每個li元素的寬度爲0px和玩耍利潤率左把他們徘徊無論你想https://jsfiddle.net/kvey3d12/10/ –

@AndreiMaieras仍是問題有你在jsfiddle鏈接 – mikeb

對不起，現在試試，我更新了鏈接 –