Question

我在下面有以下HTML，但我想知道的是可以使用jQuery .toggle函数来启用主<li>标题 Trails 链接，然后当您将鼠标放在主链接 Trails 上时，其他页面将显示，您可以单击相应的页面。

HTML： - 此HTML格式由PYROCMS提供，我无法控制

<li class="current">
        <a href="">Trials</a>
        <ul>
            <li class="first">
                <a href="">Link One</a>
            </li>
            <li>
                <a href="">Link Two</a>
            </li>
            <li>
                <a href="">Link Three</a>
            </li>
            <li class="last">
                <a href="">Link Four</a>
            </li>
        </ul>
    </li>

jQuery： - 上述问题是否可以使用以下变体？

$('select[name="domainTransfer"]').change(function() {

    $('#domainToBeTransfered,#domainToBeTransfered0').toggle($(this).val() === "yes");

    });

Baz1nga：

我看过你的jsfiddle并注意到你已经在display:none;上放置了<ul>我已将其放入我的css中，行#wrapper #contentarea #blue_box .centerblue_txt ul li ul{但它似乎没有相互作用使用jQuery。

jQuery(document).ready(function () {
    $(".current a").mouseenter(function(){
       $(this).siblings("ul").show();
    }).mouseout(function(){
       $(this).siblings("ul").hide();
    });
});

Answer 1

$(".current a").mouseenter(function(){
   $(this).siblings("ul").show();
}).mouseleave(function(){
   $(this).siblings("ul").hide();
});

这是你想要的吗？

演示：http://jsfiddle.net/rY8zm/

Answer 2

Baz1nga的解决方案在Opera中不起作用。当光标从标题转移到列表时，列表就会消失 - 因此可以查看列表但是永远不能点击它的链接。

您需要采取特殊措施才能看到光标从元素到元素的过渡。这实现了超时以非常轻微地延迟隐藏列表;每次光标经过应该保持列表存活的任何元素时取消超时。

代码中等复杂，看起来像这样：

function hideList($list) {
    clearTimeout($list.data('dropdown').tim);
    return setTimeout(function() {
        $list.stop(true).slideUp('slow');
    }, 125);
}

$("li.current").on('mouseover', "a.heading", function() {
    var $list = $(this).siblings("ul").slideDown('slow');
    clearTimeout($list.data('dropdown').tim);
}).on('mouseout', function() {
    var $list = $(this).children("ul");
    $list.data('dropdown').tim = hideList($list);
}).children("ul").on('mouseover', function() {
    clearTimeout($(this).data('dropdown').tim);
}).on('mouseout', function() {
    var $list = $(this);
    $list.data('dropdown').tim = hideList($list);
}).data('dropdown', {
    tim: null
}).hide();

请参阅fiddle

jQuery：切换下拉菜单可能性

2 个答案: