1

我正在尝试创建一个下拉菜单，当您单击它时会打开一个 ul。问题是我希望“查看更多”按钮始终位于它所在的位置，并且下拉菜单在其下方居中打开。

如果您转到下面的链接，您会明白我的意思。它完全按照我想要的方式打开，但是如果您通过单击“查看更多”关闭下拉菜单，当我希望它保持在原位时，您会看到标题向左移动

我正在构建它以便能够在许多不同的位置使用，因此“硬编码”大小不是一种选择。

请帮忙！:)

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

jQuery

$(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（临时）

4

1 回答 1

0

display: none;从文档流中删除您的元素，这就是您的父 div 调整大小的原因。另一方面，visibility: hidden;隐藏您的元素，同时将其保留在文档流中。

您可以做的不是操作<ul>元素的显示属性，而是设置visibility: hidden;和设置，height: 0;这样未扩展的链接将继续使用与其捆绑的 UL 元素的宽度。

这有点hacky，但应该完成工作。

为了使用 jQuery UI 操纵可见性而不是不显示任何内容，请使用.animate({opacity: 1})fadeIn() 和.animate({opacity: 0})fadeOut()

于 2012-05-27T19:42:03.310 回答