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

    });

Baz1nga：

私はあなたのjsfiddleを見て、あなたが私のcssに配置しdisplay:none;たサブにaを配置したことに気づきましたが、それはjQueryと相互作用していないようです。<ul>#wrapper #contentarea #blue_box .centerblue_txt ul li ul{

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 に答える