gpt4 book ai didi

javascript - 为额外元素添加 JS/jQuery 点击功能

转载 作者:行者123 更新时间:2023-11-30 14:17:31 25 4
gpt4 key购买 nike

我为每个导航标题元素编写了 4 个不同的点击函数。我认为这不是一种有效的方法。我想知道我可以使用什么逻辑在 1 个 block 中完成此操作,而不是为 4 个导航标题编写 4 个不同的 block 。

//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-header").click(function() {.

最后两行。将其替换为以下代码段。我获取了点击 header 的索引并显示了相同索引的 .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>

关于javascript - 为额外元素添加 JS/jQuery 点击功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53330964/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com