0

トップレベルのリンクをアクティブにしてクリック可能に保ちながら、矢印のトグルでアクティブにできるドロップダウンを使用して垂直メニューを作成しようとしています。私はカスタム CMS を使用しているため、これを機能させる方法に関していくつかの制約があります。

HTML

<ul class="topnav">
    <li class="tn_first">
        <span></span><a class="topmenu" href="/default.asp">Home</a>
    </li>
    <li class="tn_mid">
        <span></span><a class="topmenu" href="/listings.asp">My Listings</a>
        <ul class="subnav">
            <li class="sn_first">
                <a class="submenu" href="#">Listing 1</a>
            </li>
            <li class="sn_mid">
                <a class="submenu" href="#">Listing 2</a>
            </li>
            <li class="sn_last">
                <a class="submenu" href="#">Listing 3</a>
            </li>
        </ul>
    </li>   
    <li class="tn_last">
        <span></span><a class="topmenu" href="/links.asp">System Pages</a>
        <ul class="subnav">
            <li class="sn_first">
                <a class="submenu" href="#">Page 1</a>
            </li>
            <li class="sn_mid">
                <a class="submenu" href="#">Page 2</a>
            </li>
            <li class="sn_last">
                <a class="submenu" href="#">Page 3</a>
            </li>
        </ul>
    </li>               
</ul>

これで、非常に単純な UL LI メニュー システムが完成しました。トップ レベルのナビゲーションのテンプレートに、トグル スイッチとして使用したい span タグを追加しました。スパンは何にでも変更できます。それは私が現在持っているものです。

私が遭遇した問題は、これがテンプレート システムであることを考えると、スパンを入れるオプションがありますが、ul.subnav が同じ li に存在するかどうかに基づいて条件付きで表示するオプションがないことです。したがって、実際にこの条件を満たすものに display:block を適用する何らかの方法が必要です。その後、デフォルトで他のスパンを display:none にします。

このソリューションを使用してみましたが、ある程度は機能しましたが、複数のドロップダウンでは機能しません。メニュー構造にドロップダウンの単一のインスタンスがある場合にのみ機能するようです。

jQuery トグル ドロップダウン メニュー と http://jsfiddle.net/hXNnD/1/

Javascript

jQuery(document).ready(function () {

var subMenu = jQuery("li ul li");
var linkClick = jQuery("ul li").filter(":has(ul)");

subMenu.hide();

linkClick.click(function (e) {
    e.preventDefault();
    subMenu.slideToggle("fast");
});
});

2 つのサブ UL を持つ別の例を作成したので、コードが落ちている場所を確認できます。

http://jsfiddle.net/BxsEX/

4

2 に答える 2

1

スパンを CSS で非表示にして、次のようにします。$('.topnav li:has(ul) span').show();

http://jsbin.com/ujoqek/1/edit

CSS:

.topnav li span{ display:none; }

jQ:

var arrow = ['&#9660;','&#9650;'];

$('.topnav li:has(ul) span').show().html( arrow[0] ).data('a',0);
$('.topnav li > ul').hide();

$('.topnav span').click(function(){
  $(this).closest('li').find('ul').slideToggle();
  var arrw = $(this).data('a');
  $(this).html( arrow[++arrw%2] ).data('a', arrw); 
});
于 2012-11-22T16:50:36.760 に答える
0

私はこれがあなたが望んでいたすべてだと思います。私は間違っているかもしれません。 

$('li').each(function(){ 
    //if we can find a UL with the class of subnav within our LI
    if($(this).find('ul.subnav').length){ 
        //find the span within this LI and give it a display block
        $(this).find('span').css('display', 'block')
    }else{
        //otherwise, hide the span.
        $(this).find('span').css('display', 'none')
    }
});
于 2012-11-22T16:47:16.160 に答える