通過類處理兩個slideUp/Down

我在我的網站的移動視圖中有兩個菜單。如果你點擊漢堡條，它們應該向下/向上滑動。這對我來說基本上沒有問題。通過類處理兩個slideUp/Down

我的HTML看起來像這樣：

... 
<div class="foo"> 
    <div class="trigger menu1"> 
    .. 
    </div> 
    <div class="trigger menu2"> 
    ... 
    </div> 
</div> 
... 
<nav id="main-navi"> 
    ... 
</nav> 
<ul id="info-navi> 
    ...  
</ul> 
...

在我通過jQuery與點擊事件爲每一個觸發解決它的那一刻。像這樣...

... 
$(".trigger.menu1").click(function() { 
    ... 
    $("#main-navi").slideDown(); 
}); 
$(".trigger.menu2").click(function() { 
    ... 
    $("#info-navi").slideDown(); 
    ... 
}); 
...

這工作正常，但我想更容易使用它，沒有太多的代碼。難道僅僅爲.trigger獲取一個事件並將其僅引用到該類以觸發菜單向下滑動？

我喜歡的東西嘗試過，但它不工作：

if ($this.hasClass("menu1")) { 
    $("#main-navi").slideDown(); 
} else { 
    $("#info-navi").slideDown(); 
}

有沒有辦法得到這個工作？

問候，馬庫斯

來源

2016-06-21 Sukrams

嗨，你可以把它放在一個小提琴或片段，所以我可以看到實際發生的事情......謝謝 – MrBuggy

你已經解決了你的問題。儘管有這個其他可能的解決方案，但是這個代碼工作得很好你的目的：

$(".trigger").on("click", function(e){ 
    e.preventDefault(); 

    if ($this.hasClass("menu1")) { 
    $("#main-navi").slideDown(); 
    } else { 
    $("#info-navi").slideDown(); 
    } 
});//.trigger click

來源

2016-06-21 09:32:33

你在正確的方向前進，但你在你的代碼有一個小的語法錯誤。試試這個：

$('.trigger').on('click', function(){ 
    var isMenu1 = $(this).hasClass('menu1'); 
    if(isMenu1){ 
     $("#main-navi").slideDown(); 
    } else { 
     $("#info-navi").slideDown(); 
    } 
});

$this是不正確，應該是$(this)

來源

2016-06-21 09:33:17

您可以使用HTML5data-*屬性來實現這一目標：

$(function() { 
 
    $('.trigger').click(function(e) { 
 
    e.preventDefault(); 
 
    
 
    $('#' + $(this).attr('data-target')).slideToggle(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="foo"> 
 
    <div data-target="main-navi" class="trigger"> 
 
    Menu Opener 1 
 
    </div> 
 
    <div data-target="info-navi" class="trigger"> 
 
    Menu Opener 2 
 
    </div> 
 
</div> 
 
... 
 
<nav id="main-navi"> 
 
    Menu Slide 1 
 
</nav> 
 
<ul id="info-navi"> 
 
    Menu Slide 2 
 
</ul>

來源

2016-06-21 09:33:29

這可以幫助你，

var clickedItem = $(".foo").find('div'); 

clickedItem.click(function(e){ 
    e.prventDefault(); 
    if($(this).hasClass('menu1')){ 
     $("#main-navi").slideDown(); 
    }else{ 
     $("#info-navi").slideDown(); 
    } 
});

來源

2016-06-21 09:34:36 Samir

爲什麼不使用slideToggle（）jquery函數？您可以在這裏找到幫助http://api.jquery.com/slidetoggle/。

來源

2016-06-21 09:38:36

無法使用它，因爲當第一次滑落時，第二次必須向上滑動。 – Sukrams

通過類處理兩個slideUp/Down

回答

相關問題