Question

我有这个下拉按钮 http://fiddle.jshell.net/65q4r/

现在我正在努力实现两件事：

点击下拉链接或下拉列表中的任何位置时仍然开放。
在同一页面中有两个独立工作。

谢谢大家!!

Answer 1

这是你想要的吗？

http://fiddle.jshell.net/65q4r/6/

这是HTML：

<div class="click-nav">
    <ul class="no-js">
        <li>
            <a href="#" class="clicker">Dropdown Button</a>
            <ul>
                <li><a href="#">Link1</a></li>
                <li><a href="#">Link2</a></li>
                <li><a href="#">Link3</a></li>
                <li><a href="#">Link4</a></li>
            </ul>
        </li>
    </ul>
</div>
<div class="click-nav">
    <ul class="no-js">
        <li>
            <a href="#" class="clicker">Dropdown Button</a>
            <ul>
                <li><a href="#">Link1</a></li>
                <li><a href="#">Link2</a></li>
                <li><a href="#">Link3</a></li>
                <li><a href="#">Link4</a></li>
            </ul>
        </li>
    </ul>
</div>

CSS：

.price {
    color: #820C8E;
    font-size: 15px !important;
    font-weight: bold
}

.click-nav {
    float:left
}
.click-nav ul {
    float:left;
    position: relative;
    font-weight: 400;
    margin-top: -6px;
    margin-bottom:0;
    font-size:14px
}
.click-nav ul li {
    position: relative;
    list-style: none;
    cursor: pointer;
}
.click-nav ul li ul {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 9999;
}
.click-nav ul .clicker {
    position: relative;
    color: #494949;
}
.click-nav ul .clicker:hover, .click-nav ul .active {
}
.click-nav img {
    position: absolute;
    top: 6px;
    left: 0;
}
.click-nav ul li a {
    display: block;
    padding: 0 10px 0 22px;
    background: #FFF;
}
.click-nav ul li li a{
    transition: background-color 0.2s ease-in-out;
    -webkit-transition: background-color 0.2s ease-in-out;
    -moz-transition: background-color 0.2s ease-in-out;
    display: block;
    padding: 0 62px 0 22px;
    background: #ccc;
}
.click-nav ul li a:hover {
}
/* Fallbacks */
.click-nav .no-js ul {
    display: none;
}
.click-nav .no-js:hover ul {
    display: block;
}

JavaScript：

$(document).ready(function() {
    $('.click-nav > ul').toggleClass('no-js js');
    $('.click-nav .js ul').hide();
    $('.click-nav .clicker').click(function(e) {
        $(this).parent().find("ul").slideToggle(200);
        $(this).toggleClass('active');
        if($(e.target).attr('href') == '#') {e.preventDefault();}
e.stopPropagation();
        e.stopPropagation();
    });
    $('*:not(.click-nav):not(.click-nav *)').click(function (e) {
        $(".js ul").slideUp(200);
        $(".clicker").removeClass('active');
        e.stopPropagation();
    });
});

Answer 2

对你的JS进行两次小调整：http://fiddle.jshell.net/65q4r/7/

第4-5行：

$('.clicker').click(function(e) {
    $('+ ul', $(this)).slideToggle(200);

并添加了此处理程序：

$('.click-nav > ul ul a').click(function(e) {
    e.stopPropagation();
});

还为html添加了第二个按钮来演示。

单击内容后如何使下拉按钮保持打开状态？

2 个答案: