通过单击来阻止激活菜单

Question

我有一个菜单，点击它的一个元素就会动画并突出显示点击的元素，但是我注意到如果我点击菜单而不是元素，菜单动画就会被激活。有什么帮助吗？

JSFIDDLE：http://jsfiddle.net/kvey3d12/

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);
});

Answer 1

检查一下 JS Fiddle

$("button").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);
});

Answer 2

请检查这个我认为它可以帮助你 demo

demo2

.button{
padding:0;
}
li{
width:22px;
}