Question

第一列设置为display: table，只有文字可点击。这正是它应该是怎样的。

然而，第二列（并且必须是，我认为...）设置为display: none，当我有不同长度的文本（单击CCC以查看最佳示例）时，它会创建一个块并且整个宽度是可点击的。

我认为背景颜色使问题非常明确。

我该如何解决这个问题？

理想情况下，我正在寻找CSS修复程序。但是，如果那是不可能的，那么编辑javascript就是要走的路......我全都是为了它。

感谢。

HTML

<div id="mainWrapper">
<ul id="menu">
    <li><a href="#">AAA</a>
        <ul class="drop">
            <li><a href="#">AAAAAAAAAA.1</a>
                <ul>
                    <li><a href="#">AAA.1-1</a></li>
                </ul>
            </li>
            <li><a href="#">AAA.2</a>
                <ul>
                    <li><a href="#">AAA.2-1</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">BBB</a>
        <ul class="drop">
            <li><a href="#">BBBBBBBBBB.1</a>
                <ul>
                    <li><a href="#">BBB.1-1</a></li>
                </ul>
            </li>
            <li><a href="#">BBB.2</a>
                <ul>
                    <li><a href="#">BBB.2-1</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">CCC</a>
        <ul class="drop">
            <li><a href="#">CCCCCCCCCC.1</a>
                <ul>
                    <li><a href="#">CCC.1-1</a></li>
                </ul>
            </li>
            <li><a href="#">CCC.2</a>
                <ul>
                    <li><a href="#">CCC.2-1</a></li>
                </ul>
            </li>
            <li><a href="#">CCCCC.3</a>
                <ul>
                    <li><a href="#">CCC.3-1</a></li>
                </ul>
            </li>
            <li><a href="#">CCC.4</a>
                <ul>
                    <li><a href="#">CCC.4-1</a></li>
                </ul>
            </li>
            <li><a href="#">CCC.5</a>
                <ul>
                    <li><a href="#">CCC.5-1</a></li>
                </ul>
            </li>
            <li><a href="#">CCCCCCCCCCCCCCC.6</a>
                <ul>
                    <li><a href="#">CCC.6-1</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
</div>

CSS

#mainWrapper{
    background-color: #FFFFFF;
    overflow: hidden;
    width: 100%;
    height: 400px;
    margin: 0; border: 0; padding: 0;
}

body{
    overflow: hidden;
    background-color: #FFFFFF;
    margin: 0; border: 0; padding: 0;
}

ul#menu {
    list-style: none;
    color: #000000;
    margin: 0; border: 0; padding: 0;
}

ul#menu a {
    list-style: none;
    text-decoration: none;
    color: #000000;
}

ul#menu>li {
    list-style: none;
    position: relative;
    top: 20px;
    left: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    line-height: 15px;
    display: table;
    background-color: blue;
    margin: 0; border: 0; padding: 0;
}

ul#menu>li ul.drop ul {
    position: absolute;
    display: none;
    margin: 0; border: 0; padding: 0;
}

ul#menu>li ul li {
    list-style:none;
    position: relative;
    margin: 0; border: 0; padding: 0;
}

ul#menu>li ul.drop {
    list-style: none;
    position: fixed;
    top: 20px;
    left: 80px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    line-height: 15px;
    color: #000000;
    display: none;
    background-color: red;
    margin: 0; border: 0; padding: 0;
}

ul#menu>li ul.drop li ul {
    position: fixed;
    top: 20px;
    left: 220px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    line-height: 15px;
    color: #000000;
    background-color: green;
    display: none;
}

JS

$(function(){
    $('ul#menu li').on('click', function(){
        if($(this).children('.drop').size() > 0) {
            $("ul.drop").slideUp();
            $("ul.drop").find('ul').hide();
        } else {
            }
     $(this).children('ul').delay(20).slideToggle(600);
    });
});
$('ul').on('click', function(e){
  e.stopPropagation();
});

Answer 1

我刚修改了一些选择器，现在它可以正常工作了。

$(function(){
    $('ul#menu li a, ul#menu li ul li a').on('click', function(){
        if($(this).parent().children('.drop').size() > 0) {
            $("ul.drop").slideUp();
            $("ul.drop").find('ul').hide();
        } else {
            }
     $(this).parent().children('ul').delay(20).slideToggle(600);
    });
});
$('ul').on('click', function(e){
  e.stopPropagation();
});

工作fiddle

Answer 2

如果您希望仅通过修改CSS规则来满足要求。这个解决方案怎么样？：

ul#menu>li ul li {
    list-style:none;
    position: relative;
    margin: 0; border: 0; padding: 0;

    border: 1px solid black !important;
    float: left;
    clear: left;
}

jsfiddle

我认为，这个修改过的规则可以限制列表项的宽度，以便将自己调整为内部文本的宽度。但是，这是一个丑陋的黑客，所以我建议修改JavaScript。

Answer 3

要突出显示第二个菜单上的A元素，您可以添加如下的CSS：

ul#menu>li ul.drop > li > a{
    background: gray;
}

你可以看到元素A的宽度不是100％

如果你想宽度为100％：

ul#menu>li ul.drop > li > a{
    background: gray;
    display: block; /* add this line */

}

Answer 4

嘿，你有整个li-tag作为onclick-reciever。如果您只想要文本可点击，则必须只选择a-tags

$(function(){
    $('a').on('click', function(){
        if($(this).closest('li').children('.drop').size() > 0) {
            $("ul.drop").slideUp();
            $("ul.drop").find('ul').hide();
        } else {
            $(this).closest('li').siblings('li').find('ul').hide();         
            }
     $(this).closest('li').children('ul')
     .delay(20).slideToggle(600);
    });
});
$('ul').on('click', function(e){e.stopPropagation();});

试试这个小提琴。它应该按预期工作。 http://jsfiddle.net/lacrioque/84rmsgxc/

如何将点击区域限制为文字？

4 个答案: