為其他元素添加JS / jQuery點擊功能

Question

我為每個nav標頭元素編寫了4種不同的click函數。 我認為這不是一種有效的方法。 我想知道我可以使用哪種邏輯在1個塊中完成此工作，而不是為4個nav標頭編寫4個不同的塊。

 //First Nav Header $(".header-experience").click(function() { $(".sub-nav-inner-container div").show(); if(($(window).innerWidth() >= 993)) { $('.sub-nav-inner-container .slick-list.draggable').css("left","-100px"); $('.sub-nav-inner-container .slick-list.draggable').animate({ left:"0" },{ duration: 300, easing: "linear" }); } if(($(window).innerWidth() < 993)) { $('.sub-nav-inner-container .slick-list.draggable').css("left","50px"); $('.sub-nav-inner-container .slick-list.draggable').animate({ left:"0" },{ duration: 200, easing: "linear" }); } if(($(window).innerWidth() < 476)) { $('.sub-nav-inner-container').css("padding-left","150px"); $('.sub-nav-inner-container').animate({ paddingLeft:"65px" },{ duration: 200, easing: "linear" }); } $(".sub-nav-inner-container").hide(); $(".container-experience").show(); $(".container-experience .sub-nav-inner-container").css("display","flex"); }); //Second Nav Header $(".header-shop").click(function() { $(".sub-nav-inner-container div").show(); if(($(window).innerWidth() >= 993)) { $('.sub-nav-inner-container .slick-list.draggable').css("left","-100px"); $('.sub-nav-inner-container .slick-list.draggable').animate({ left:"0" },{ duration: 300, easing: "linear" }); } if(($(window).innerWidth() < 993)) { $('.sub-nav-inner-container .slick-list.draggable').css("left","50px"); $('.sub-nav-inner-container .slick-list.draggable').animate({ left:"0" },{ duration: 200, easing: "linear" }); } if(($(window).innerWidth() < 476)) { $('.sub-nav-inner-container').css("padding-left","150px"); $('.sub-nav-inner-container').animate({ paddingLeft:"65px" },{ duration: 200, easing: "linear" }); } $(".sub-nav-inner-container").hide(); $(".container-shop").show(); $(".container-shop .sub-nav-inner-container").css("display","flex"); }); //Third Nav Header $(".header-extra-label").click(function() { $(".sub-nav-inner-container div").show(); if(($(window).innerWidth() >= 993)) { $('.sub-nav-inner-container .slick-list.draggable').css("left","-100px"); $('.sub-nav-inner-container .slick-list.draggable').animate({ left:"0" },{ duration: 300, easing: "linear" }); } if(($(window).innerWidth() < 993)) { $('.sub-nav-inner-container .slick-list.draggable').css("left","50px"); $('.sub-nav-inner-container .slick-list.draggable').animate({ left:"0" },{ duration: 200, easing: "linear" }); } if(($(window).innerWidth() < 476)) { $('.sub-nav-inner-container').css("padding-left","150px"); $('.sub-nav-inner-container').animate({ paddingLeft:"65px" },{ duration: 200, easing: "linear" }); } $(".sub-nav-inner-container").hide(); $(".container-extra-label").show(); $(".container-extra-label .sub-nav-inner-container").css("display","flex"); }); //Fourth Nav Header $(".header-extra-equity").click(function() { $(".sub-nav-inner-container div").show(); if(($(window).innerWidth() >= 993)) { $('.sub-nav-inner-container .slick-list.draggable').css("left","-100px"); $('.sub-nav-inner-container .slick-list.draggable').animate({ left:"0" },{ duration: 300, easing: "linear" }); } if(($(window).innerWidth() < 993)) { $('.sub-nav-inner-container .slick-list.draggable').css("left","50px"); $('.sub-nav-inner-container .slick-list.draggable').animate({ left:"0" },{ duration: 200, easing: "linear" }); } if(($(window).innerWidth() < 476)) { $('.sub-nav-inner-container').css("padding-left","150px"); $('.sub-nav-inner-container').animate({ paddingLeft:"65px" },{ duration: 200, easing: "linear" }); } $(".sub-nav-inner-container").hide(); $(".container-extra-equity").show(); $(".container-extra-equity .sub-nav-inner-container").css("display","flex"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div class="sidebar-sub-nav display-none wrapper"> <div class="slider"></div> <ul class="sub-nav-category nav nav-tabs nav-justified"> <li class="nav-item active"><a class="nav-link" data-toggle="tab"> <span class="nav-header header-shop">Shop</span> </a></li> <li class="nav-item"><a class="nav-link" data-toggle="tab"> <span class="nav-header header-experience">Bars</span> </a></li> <li class="nav-item"><a class="nav-link" data-toggle="tab"> <span class="nav-header header-extra-label">Discover BrewDog</span> </a></li> <li class="nav-item"><a class="nav-link" data-toggle="tab"> <span class="nav-header header-extra-equity">Equity for Punks</span></a></li> </ul> <div class="sub-nav-container"> <!-- SHOP NAV START --> <div class="sub-nav-inner-container container-shop carousel"> <div> <p class="sub-nav-header"><a href="{{store url="beers"}}">Beer</a></p> <div class="sub-nav-contents"> <p><a href="{{store url="beer/new-in.html"}}">New In</a></p> <p><a href="{{store url="beer/headliners.html"}}">Headliners</a></p> <p><a href="{{store url="beer/seasonal.html"}}">Seasonal</a></p> <p><a href="{{store url="beer/year-round.html"}}">Year round</a></p> <p><a href="{{store url="beer/high-octane.html"}}">High Octane</a></p> <p><a href="{{store url="beer/overworks.html"}}">OverWorks</a></p> <p><a href="{{store url="beer/abstrakt.html"}}">Abstrakt</a></p> <p><a href="{{store url="beer/guest.html"}}">Guest</a></p> </div> </div> <div> <p class="sub-nav-header"><a href="{{store url="merch.html"}}">Merch</a></p> <div class="sub-nav-contents"> <p><a href="{{store url="merch/clothing.html"}}">Clothing</a></p> <p><a href="{{store url="merch/chain-gang.html"}}">Chain Gang</a></p> <p><a href="{{store url="merch/barware-glasses.html"}}">Barware &amp; Glasses</a></p> <p><a href="#">Accessories</a></p> <p><a href="{{store url="merch/sale.html"}}">Sale</a></p> <p><a href="{{store url="merch/gifts.html"}}">Gifts</a></p> </div> </div> <div> <p class="sub-nav-header"><a href="spirits.html">Spirits</a></p> <div class="sub-nav-contents"> <p><a href="{{store url="gin.html"}}">Gin</a></p> <p><a href="{{store url="vodka.html"}}">Vodka</a></p> <p><a href="{{store url="whisky.html"}}">Whisky</a></p> <p><a href="{{store url="mixers.html"}}">Mixers</a></p> </div> </div> <div> <p class="sub-nav-header"><a href="#">Subscriptions</a></p> <div class="sub-nav-contents"> <p><a href="{{store url="bottlebox"}}">Bottle Box</a></p> <p><a href="{{store url="fanzine"}}fanzine/">Fanzine</a></p> <p><a href="#">Build and buy</a></p> </div> </div> </div> <!-- SHOP NAV END --> <!-- BARS NAV START --> <div class="sub-nav-inner-container container-experience carousel"> <div> <p class="sub-nav-header"><a href="{{store url="bars"}}">Bars</a></p> <div class="sub-nav-contents"> <p><a href="{{store url="bars/uk"}}">UK</a></p> <p><a href="{{store url="bars/global"}}">International</a></p> <p><a href="{{store url="bars/us"}}">USA</a></p> <p><a href="{{store url="bars/coming-soon"}}">Coming Soon</a></p> </div> </div> <div> <p class="sub-nav-header"><a href="#">Bar Experience</a></p> <div class="sub-nav-contents"> <p><a href="{{store url="lowdown/chain-gang"}}">Chain Gang</a></p> <p><a href="{{store url="bars/uk/dogtap"}}">Dog Tap</a></p> <p><a href="{{store url="bars/beer-visa"}}">Beer Visa</a></p> <p><a href="#">EFP Franchise Opportunities</a></p> <p><a href="{{store url="bars/festive"}}">Festive</a></p> </div> </div> </div> <!-- BARS NAV END --> <!-- DISCOVER NAV START --> <div class="sub-nav-inner-container container-extra-label carousel"> <div> <p class="sub-nav-header"><a href="#">About</a></p> <div class="sub-nav-contents"> <p><a href="{{store url="lowdown/brewdog-believe"}}">BrewDog Believe</a></p> <p><a href="{{store url="about/culture/the-charter"}}">The Charter</a></p> <p><a href="{{store url="about/culture/culture-check"}}">Culture</a></p> <p><a href="{{store url="about/history"}}">History</a></p> <p><a href="{{store url="about/brewdogfoundation"}}">BrewDog Foundation</a></p> <p><a href="https://jobs.brewdog.com">Jobs</a></p> </div> </div> <div> <p class="sub-nav-header"><a href="{{store url="lowdown/blog"}}">Blog</a></p> <div class="sub-nav-contents"> <p><a href="{{store url=""}}">Brewdog News</a></p> <p><a href="{{store url=""}}">Business for Punks</a></p> <p><a href="{{store url=""}}">Video Blog</a></p> <p><a href="{{store url=""}}">Beer Rocks</a></p> <p><a href="{{store url=""}}">Brewery Updates</a></p> <p><a href="{{store url=""}}">Caption Competition</a></p> <p><a href="{{store url=""}}">Dog's Blogs</a></p> <p><a href="{{store url=""}}">BrewDog Bars</a></p> </div> </div> <div> <p class="sub-nav-header"><a href="{{store url="brewery"}}">Brewery</a></p> <div class="sub-nav-contents"> <p><a href="{{store url="brewery/ellon-brewery"}}">Beer Making Process</a></p> <p><a href="#">Ellon</a></p> <p><a href="{{store url="brewery/overworks-brewery"}}">OverWorks</a></p> <p><a href="{{store url="brewery/usa-brewery"}}">Columbus</a></p> <p><a href="{{store url="brewery/brisbane-brewery"}}">Brisbane</a></p> <p><a href="#">DIY Dog</a></p> <p><a href="{{store url="dog-house"}}">DogHouse</a></p> <p><a href="#">Quality Labs</a></p> </div> </div> <div> <p class="sub-nav-header"><a href="#">Events</a></p> <div class="sub-nav-contents"> <p><a href="{{store url="events/collabfest"}}">Collabfest</a></p> <p><a href="{{store url="events/metro-mayhem"}}">Metro Mayhem</a></p> <p><a href="{{store url="events/agm2018"}}">AGM</a></p> </div> </div> </div> <!-- DISCOVER NAV END --> <!-- EFP NAV START --> <div class="sub-nav-inner-container container-extra-equity carousel"> <div> <p class="sub-nav-header">Equity For Punks</p> <div class="sub-nav-contents"> <p><a href="{{store url="lowdown/brewdog-believe"}}">EFP UK</a></p> <p><a href="{{store url="about/culture/the-charter"}}">EFP USA</a></p> <p><a href="{{store url="about/culture/culture-check"}}">EFP Australia</a></p> <p><a href="{{store url="about/history"}}">EFP Re-Brews</a></p> <p><a href="{{store url="about/brewdogfoundation"}}">Blue Print</a></p> </div> </div> </div> <!-- EFP NAV END --> </div> </div> 

除第一個單擊功能行和最后兩個行代碼外，所有4個nav標頭的代碼均相同

Answer 1

您可以使用一些forEach循環來生成它，就像這樣。

function addAnimations (params) {
  if(($(window).innerWidth() >= params.width)) {
    $('.sub-nav-inner-container .slick-list.draggable').css("left",`${params.left}px`);
    $('.sub-nav-inner-container .slick-list.draggable').animate({
        left:"0"
    },{
        duration: params.duration,
        easing: "linear"
    });
  }
}

function bindHeader (selector) {
  var params = [
    {width: 993, left: -100, duration: 300},
    {width: 993, left: -50, duration: 200},
    {width: 476, left: -150, duration: 200}
  ];
  $(selector.header).click(function() {
    $(".sub-nav-inner-container div").show();
    params.forEach(function(param) {
      addAnimations(param)
    });
    $(".sub-nav-inner-container").hide();
    $(selector.menu).show();
    $(`${selector.menu} .sub-nav-inner-container`).css("display","flex");
  });
}

var selectors = [
  {header: '.header-experience', menu: '.container-experience'},
  {header: '.header-shop', menu: '.container-shop'},
  {header: '.header-extra-label', menu: '.container-extra-label'},
  {header: '.header-extra-equity', menu: '.container-extra-equity'}
]

selectors.forEach(function(selector) {
  bindHeader(selector);
})

Answer 2

將第一行更改為$(".nav-header").click(function() { 。

對於最后兩行。 將其替換為以下代碼段。 我已經獲取了已點擊標題的索引，並顯示了相同索引的.sub-nav-inner-container 。

var index = $(".nav-header").index(this);
$(".sub-nav-inner-container:nth(" + index + ")").show();
$(".sub-nav-inner-container:nth(" + index + ")").find(".sub-nav-inner-container").css("display", "flex");  

 // All Nav Header $(".nav-header").click(function() { $(".sub-nav-inner-container div").show(); if (($(window).innerWidth() >= 993)) { $('.sub-nav-inner-container .slick-list.draggable').css("left", "-100px"); $('.sub-nav-inner-container .slick-list.draggable').animate({ left: "0" }, { duration: 300, easing: "linear" }); } if (($(window).innerWidth() < 993)) { $('.sub-nav-inner-container .slick-list.draggable').css("left", "50px"); $('.sub-nav-inner-container .slick-list.draggable').animate({ left: "0" }, { duration: 200, easing: "linear" }); } if (($(window).innerWidth() < 476)) { $('.sub-nav-inner-container').css("padding-left", "150px"); $('.sub-nav-inner-container').animate({ paddingLeft: "65px" }, { duration: 200, easing: "linear" }); } $(".sub-nav-inner-container").hide(); var index = $(".nav-header").index(this); $(".sub-nav-inner-container:nth(" + index + ")").show(); $(".sub-nav-inner-container:nth(" + index + ")").find(".sub-nav-inner-container").css("display", "flex"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div class="sidebar-sub-nav display-none wrapper"> <div class="slider"></div> <ul class="sub-nav-category nav nav-tabs nav-justified"> <li class="nav-item active"> <a class="nav-link" data-toggle="tab"> <span class="nav-header header-shop">Shop</span> </a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab"> <span class="nav-header header-experience">Bars</span> </a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab"> <span class="nav-header header-extra-label">Discover BrewDog</span> </a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab"> <span class="nav-header header-extra-equity">Equity for Punks</span></a> </li> </ul> <div class="sub-nav-container"> <!-- SHOP NAV START --> <div class="sub-nav-inner-container container-shop carousel"> <div> <p class="sub-nav-header"><a href="{{store url=" beers "}}">Beer</a></p> <div class="sub-nav-contents"> <p><a href="{{store url=" beer/new-in.html "}}">New In</a></p> <p><a href="{{store url=" beer/headliners.html "}}">Headliners</a></p> <p><a href="{{store url=" beer/seasonal.html "}}">Seasonal</a></p> <p><a href="{{store url=" beer/year-round.html "}}">Year round</a></p> <p><a href="{{store url=" beer/high-octane.html "}}">High Octane</a></p> <p><a href="{{store url=" beer/overworks.html "}}">OverWorks</a></p> <p><a href="{{store url=" beer/abstrakt.html "}}">Abstrakt</a></p> <p><a href="{{store url=" beer/guest.html "}}">Guest</a></p> </div> </div> <div> <p class="sub-nav-header"><a href="{{store url=" merch.html "}}">Merch</a></p> <div class="sub-nav-contents"> <p><a href="{{store url=" merch/clothing.html "}}">Clothing</a></p> <p><a href="{{store url=" merch/chain-gang.html "}}">Chain Gang</a></p> <p><a href="{{store url=" merch/barware-glasses.html "}}">Barware &amp; Glasses</a></p> <p><a href="#">Accessories</a></p> <p><a href="{{store url=" merch/sale.html "}}">Sale</a></p> <p><a href="{{store url=" merch/gifts.html "}}">Gifts</a></p> </div> </div> <div> <p class="sub-nav-header"><a href="spirits.html">Spirits</a></p> <div class="sub-nav-contents"> <p><a href="{{store url=" gin.html "}}">Gin</a></p> <p><a href="{{store url=" vodka.html "}}">Vodka</a></p> <p><a href="{{store url=" whisky.html "}}">Whisky</a></p> <p><a href="{{store url=" mixers.html "}}">Mixers</a></p> </div> </div> <div> <p class="sub-nav-header"><a href="#">Subscriptions</a></p> <div class="sub-nav-contents"> <p><a href="{{store url=" bottlebox "}}">Bottle Box</a></p> <p><a href="{{store url=" fanzine "}}fanzine/">Fanzine</a></p> <p><a href="#">Build and buy</a></p> </div> </div> </div> <!-- SHOP NAV END --> <!-- BARS NAV START --> <div class="sub-nav-inner-container container-experience carousel"> <div> <p class="sub-nav-header"><a href="{{store url=" bars "}}">Bars</a></p> <div class="sub-nav-contents"> <p><a href="{{store url=" bars/uk "}}">UK</a></p> <p><a href="{{store url=" bars/global "}}">International</a></p> <p><a href="{{store url=" bars/us "}}">USA</a></p> <p><a href="{{store url=" bars/coming-soon "}}">Coming Soon</a></p> </div> </div> <div> <p class="sub-nav-header"><a href="#">Bar Experience</a></p> <div class="sub-nav-contents"> <p><a href="{{store url=" lowdown/chain-gang "}}">Chain Gang</a></p> <p><a href="{{store url=" bars/uk/dogtap "}}">Dog Tap</a></p> <p><a href="{{store url=" bars/beer-visa "}}">Beer Visa</a></p> <p><a href="#">EFP Franchise Opportunities</a></p> <p><a href="{{store url=" bars/festive "}}">Festive</a></p> </div> </div> </div> <!-- BARS NAV END --> <!-- DISCOVER NAV START --> <div class="sub-nav-inner-container container-extra-label carousel"> <div> <p class="sub-nav-header"><a href="#">About</a></p> <div class="sub-nav-contents"> <p><a href="{{store url=" lowdown/brewdog-believe "}}">BrewDog Believe</a></p> <p><a href="{{store url=" about/culture/the-charter "}}">The Charter</a></p> <p><a href="{{store url=" about/culture/culture-check "}}">Culture</a></p> <p><a href="{{store url=" about/history "}}">History</a></p> <p><a href="{{store url=" about/brewdogfoundation "}}">BrewDog Foundation</a></p> <p><a href="https://jobs.brewdog.com">Jobs</a></p> </div> </div> <div> <p class="sub-nav-header"><a href="{{store url=" lowdown/blog "}}">Blog</a></p> <div class="sub-nav-contents"> <p><a href="{{store url=" "}}">Brewdog News</a></p> <p><a href="{{store url=" "}}">Business for Punks</a></p> <p><a href="{{store url=" "}}">Video Blog</a></p> <p><a href="{{store url=" "}}">Beer Rocks</a></p> <p><a href="{{store url=" "}}">Brewery Updates</a></p> <p><a href="{{store url=" "}}">Caption Competition</a></p> <p><a href="{{store url=" "}}">Dog's Blogs</a></p> <p><a href="{{store url=" "}}">BrewDog Bars</a></p> </div> </div> <div> <p class="sub-nav-header"><a href="{{store url=" brewery "}}">Brewery</a></p> <div class="sub-nav-contents"> <p><a href="{{store url=" brewery/ellon-brewery "}}">Beer Making Process</a></p> <p><a href="#">Ellon</a></p> <p><a href="{{store url=" brewery/overworks-brewery "}}">OverWorks</a></p> <p><a href="{{store url=" brewery/usa-brewery "}}">Columbus</a></p> <p><a href="{{store url=" brewery/brisbane-brewery "}}">Brisbane</a></p> <p><a href="#">DIY Dog</a></p> <p><a href="{{store url=" dog-house "}}">DogHouse</a></p> <p><a href="#">Quality Labs</a></p> </div> </div> <div> <p class="sub-nav-header"><a href="#">Events</a></p> <div class="sub-nav-contents"> <p><a href="{{store url=" events/collabfest "}}">Collabfest</a></p> <p><a href="{{store url=" events/metro-mayhem "}}">Metro Mayhem</a></p> <p><a href="{{store url=" events/agm2018 "}}">AGM</a></p> </div> </div> </div> <!-- DISCOVER NAV END --> <!-- EFP NAV START --> <div class="sub-nav-inner-container container-extra-equity carousel"> <div> <p class="sub-nav-header">Equity For Punks</p> <div class="sub-nav-contents"> <p><a href="{{store url=" lowdown/brewdog-believe "}}">EFP UK</a></p> <p><a href="{{store url=" about/culture/the-charter "}}">EFP USA</a></p> <p><a href="{{store url=" about/culture/culture-check "}}">EFP Australia</a></p> <p><a href="{{store url=" about/history "}}">EFP Re-Brews</a></p> <p><a href="{{store url=" about/brewdogfoundation "}}">Blue Print</a></p> </div> </div> </div> <!-- EFP NAV END --> </div> </div> 

Answer 3

您可以使用選擇器中的“逗號”分隔符來定位所有元素：

$(".header-experience, .header-shop, .header-extra-label, .header-extra-equity").click(function() {

現在，所有元素都將觸發相同的click事件處理程序。

如果最后兩行是不同的，則只需使用if語句：

if ($this).is(".header-experience"))
{
    $(".container-experience").show();
    $(".container-experience .sub-nav-inner-container").css("display","flex");
}
else if …….