1

我在下面有以下 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");

    });

巴兹1nga：

我查看了您的 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();
    });​
});​
4

2 回答 2

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

​</p>

这是你想要的吗？

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

于 2012-04-17T01:06:02.143 回答
0

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();

见小提琴

于 2012-04-17T04:51:52.600 回答