我正在尝试创建一个下拉菜单, 当您单击它时, 它会打开一个 ul 。 关键是我要“ 查看更多” 按钮始终在它所在的位置, 而打开它下面的下拉键 。

如果你去下面的链接, 你会看到我的意思。 它的打开和我想的完全一样, 但是如果你点击“ View More” 关闭了下降点, 你会看到页眉移动到左边, 当我希望它保持原样的时候

我建这个,是为了能在许多不同的地方被使用, 所以“硬码”的大小是无法选择的。

请帮助! :)

HTML HTML

<div id="testcontainer">

        <a href="javascript:;" class="dropdown-activator" dropdownContent="#dropdown-content-340">
            <span>View More!</span>
        </a>

        <ul class="dropdown-content" id="dropdown-content-340">
            <li><a href="http://www.google.com" class="googleIcon">Google</a></li>
            <li><a href="http://www.yahoo.com" class="yahooIcon">Yahoo</a></li>
            <li><a href="http://www.bing.com" class="bingIcon">Bing</a></li>
        </ul>


    </div>

    <div id="testcontainer2">

        <a href="javascript:;" class="dropdown-activator" dropdownContent="#dropdown-content-350">
            <span>View More!</span>
        </a>

        <ul class="dropdown-content" id="dropdown-content-350">
            <li><a href="http://www.google.com" class="googleIcon">Google</a></li>
            <li><a href="http://www.yahoo.com" class="yahooIcon">THIS IS A TEST FOR WIDER SHIT</a></li>
            <li><a href="http://www.bing.com" class="bingIcon">Bing</a></li>
        </ul>

    </div>

    <div id="testcontainer3">

        <a href="javascript:;" class="dropdown-activator" dropdownContent="#dropdown-content-400">
            <span>View More!</span>
        </a>

        <ul class="dropdown-content" id="dropdown-container-400">
            <li><a href="http://www.google.com" class="googleIcon">GOOOOOOOOOOOOOOOOOOOOOGLEASDASDSASD</a></li>
            <li><a href="http://www.yahoo.com" class="yahooIcon">Yahoo</a></li>
            <li><a href="http://www.bing.com" class="bingIcon">Bing</a></li>
        </ul>

    </div>

CSS 安保部

#testcontainer {
position: absolute;
top: 20px;
left: 100px;
text-align: center;
}

#testcontainer2 {
position: absolute;
top: 20px;
left: 150px;
text-align: center;
}

#testcontainer3 {
position: absolute;
top: 200px;
left: 500px;
text-align: center;
}

.dropdown-activator-active {
background-color: #000;
color: #fff;
}

.dropdown a {
display: inline-block;
}

.dropdown-activator {
display: inline-block;
border: 1px solid black;
padding: 3px;
}


.dropdown-content {
visibility: hidden;
height: 0;
opacity: 0;
position: relative;
text-align: left;
margin: 0 auto;
border: 1px solid black;
}

.dropdown-content-active {
visibility: visible;
height: auto;
opacity: 1;
}

.dropdown-content ul li {
list-style: none;
}

J 查询

$(function(){

$(".dropdown-activator").click(function() {
    $this = $(this);
    var current = $this.attr( dropdownContent );
    if (!$(current).hasClass( dropdown-content-active )) {
        $this.addClass("dropdown-activator-active", 100);
        $(current).addClass( dropdown-content-active , 100, function() {
            $( html ).unbind( click );
            $( html ).not($this).one( click , function() {
                $(current).prev().removeClass("dropdown-activator-active", 100);
                $(current).removeClass( dropdown-content-active , 100);
            });
        });
    } else {
        $this.removeClass("dropdown-activator-active", 100);
        $(current).removeClass( dropdown-content-active , 100)
    }
});
});

您可以在www.chrisworrell.com(临时)上看到一个例子。