0

メニューを作成していますが、このメニューでいくつかのタブ (メニュー項目) を「slideToggle」するオプションが必要です。そのため、「中学校」というタブがあり、ユーザーがそこをクリックすると、他のタブが「表示」されます。

唯一の問題は、メニューが自動的に生成され、「中等学校」には、ユーザーがそのリンクにもアクセスできる必要があるため、削除できない href リンクがあることです。

いくつかの調査の後、私はこれを思いつきました：

$('#menu li a, #menu li').click(function() {
        $(this).find("ul").slideToggle("slow");
        switch( $('#menu ul.menu li ul').css('display') ){
            case "none":
                return false;
            break;
            case "list-item":
                return true;
            break;
        };

});

しかし、ユーザーがリンクをクリックして他のタブを開くと、スクリプトはタブを「slideToggle」しません。event.preventDefault();後でリンクをアクティブにする必要があるため、機能しなかった方法も試しました。そして、preventDefault のカウンター関数が見つかりませんでした。

人がクリックするとしたがって、ユーザーがタブをクリックすると、さらにタブが開きます。したがって、ユーザーがタブをクリックすると、さらにタブが開きます。

そのため、誰かが「情報」をクリックすると、他のタブがスライドダウンし、他のタブがダウンしたときに「情報」のページに移動するには、「情報」へのリンクを再度クリックできるようにする必要があります。

したがって、私が探しているのは、リンクに移動せずにリンクをクリックできるようにする方法ですが、タブを「slideToggeling」し、タブが「表示」されたときにリンクを再度アクティブにする必要があります。

編集：このページがモバイルページであることを指定するのを忘れていたので、マウスオーバーとホバーは機能しません...

解決済み このコードは私の問題を解決しました:

$('#menu ul.menu li.expanded').each(function(i){
switch(i)
{
case 0:
    $(this).addClass("open");  
break;
case 1:
    $(this).addClass("open");  
break;
case 2:
    $(this).addClass("open");  
break;
case 3:
    $(this).addClass("open");  
break;
case 4:
    $(this).addClass("open");  
break;
}

$('#menu li').click(function() {
    if( $(this).find("ul").css('display') == "none" ){
        $('#menu li ul.menu').slideUp("fast");
    }
    $(this).find("ul").slideDown("slow");
});
$('#menu li.open a').on('click', function(e) {
    var tabs = $(this).parent().find('ul');
    if( tabs.css('display') == "none") {
        e.preventDefault();
        $('#menu li ul.menu').slideUp("fast");
        tabs.slideDown("slow");
    }
});

助けてくれてありがとう！

4

3 に答える 3

1

言っていることが理解できれば、イベントだけでこれを行うことはできません。

これがどのように機能するかの例を次に示します。

jQuery('a').click(function(event){
    event.preventDefault();
    var newurl = this.href;
    jQuery('whatever').slideDown(function(){
        location.href = newurl;
    });
});
于 2013-02-11T22:32:09.907 に答える
1

後で href 属性が必要になった場合に作成できる href をキャンセルするには、イベント、クリック、ホバー ... を割り当てることができます。リダイレクトの場合は window.location = "otherstuff.html" があります

于 2013-02-11T22:31:20.773 に答える
0

ユーザー エクスペリエンスの観点からは、これは少し面倒に思えます。「情報」をクリックするといくつかのサブ要素が開き、別のクリックで「情報」ページに移動することを、ユーザーはどのように知ることができますか? これは、1 回のクリックでサブ要素が開き、別のクリックでサブ要素が閉じる基本的なアコーディオン要素のようです。

クリック可能なリンクとして第 1 レベルの要素が必要であるが、第 2 レベルの要素もある場合、クリックではなくマウスオーバーで第 2 レベルの要素を開くことに投票します。これにより、デフォルトを防ぐ必要がないため、クリックの問題も解決します。

あなたのHTMLがわからないので、これは間違っているかもしれませんが、試してみましょう。

$('#menu li').on('mouseenter mouseleave', function() {
    $(this).find('ul').slideToggle('slow');
});

それでもクリックアプローチを好む場合は、次のようなことができます。ここでも、HTML を推測しているだけなので、CSS セレクターが間違っている可能性がありますが、その考えは理解できるかもしれません。

$('#menu li a').on('click', function(e) {
    // Get parent of a (li), find ul underneath and check if it's visible
    var jqUl = $(this).parent().find('ul');
    if(!jqUl.is(':visible')) {
        // subelements are not visible, prevent default and slide subelements down
        e.preventDefault();
        jqUl.slideDown();
    }
});
于 2013-02-11T22:53:41.003 に答える