gpt4 book ai didi

jquery - 无法覆盖 jquery 中的上一个点击功能

转载 作者:太空宇宙 更新时间:2023-11-03 22:45:04 24 4
gpt4 key购买 nike

我有一个使用 jQuery 点击函数显示和隐藏内容的脚本。当我引入一个使用时不会关闭的关闭按钮时,问题就出现了。由于某种原因,它无法覆盖之前的类(class)。

这是代码

var item = $('.list-item');

$(item).click(function() {

$(this).addClass("active");
$(item).not(this).removeClass('active');
$(this).find('.exhibitor-content').addClass('block');
$(item).not(this).find('.exhibitor-content').removeClass('block');

var exhibitor_wrap = $(this).find('.exhibitor-wrap').height();
var exhibitor_content = $(this).find('.exhibitor-content').height();
var total_height = exhibitor_wrap + exhibitor_content + 28 + 56;

$(this).find('.item-wrap').css({
transition: 'height 350ms ease',
height: total_height + 'px'
});

$(item).not(this).find('.item-wrap').css({
transition: 'height 350ms ease',
height: 'auto'
});

});

$('.close-link').click(function(event) {

event.preventDefault();

$(this).parent().removeClass('block');

});
.future-exhibitor-links,
.exhibitor-list,
.list--unstyled {
margin-left: 0;
padding-left: 0;
list-style-type: none;
}

.exhibitor-category {
position: relative;
display: block;
font-size: 14px;
font-size: 0.875rem;
line-height: 1.5em;
text-transform: uppercase;
text-align: center;
}

.exhibitor-wrap {
padding-top: 28px;
padding-top: 1.75rem;
padding-bottom: 28px;
padding-bottom: 1.75rem;
padding-left: 10px;
padding-left: 0.625rem;
padding-right: 10px;
padding-right: 0.625rem;
}

.exhibitor-wrap:hover {
background-color: #f6f6f6;
cursor: pointer;
}

.exhibitor-wrap:hover .exhibitor-category {
color: #111;
}

.active .exhibitor-wrap {
background-color: #e1e1e1;
}

.active .exhibitor-wrap:hover {
background-color: #e1e1e1;
}

.exhibitor-icon {
display: block;
width: 50px;
width: 3.125rem;
height: 50px;
height: 3.125rem;
margin: 0 auto 7px;
margin: 0 auto 0.4375rem;
background-position: 0 0;
background-repeat: no-repeat;
}

.exhibitor-category-list {
position: relative;
margin-bottom: 28px;
margin-bottom: 1.75rem;
*zoom: 1;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}

.exhibitor-category-list:before,
.exhibitor-category-list:after {
content: '';
display: table;
}

.exhibitor-category-list:after {
clear: both;
}

.exhibitor-category-list>.list-item {
*zoom: 1;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
display: inline-block;
width: 50%;
}

.exhibitor-category-list>.list-item:before,
.exhibitor-category-list>.list-item:after {
content: '';
display: table;
}

.exhibitor-category-list>.list-item:after {
clear: both;
}

.exhibitor-category-list>.list-item:hover {
background-color: #f6f6f6;
}

@media screen and (min-width: 568px) {
.exhibitor-category-list>.list-item {
width: 33.33333333333333%;
}
}

@media screen and (min-width: 768px) {
.exhibitor-category-list>.list-item {
width: 25%;
}
}

.exhibitor-content {
position: absolute;
left: 0;
width: 100%;
background-color: #e1e1e1;
z-index: 3;
padding: 28px 28px 0;
padding: 1.75rem 28px 0;
padding: 1.75rem 1.75rem 0;
display: none;
}

.exhibitor-content.block {
display: block;
}

.exhibitor-list {
padding-bottom: 28px;
padding-bottom: 1.75rem;
}

.exhibitor-list>.exhibitor-list-item {
*zoom: 1;
border-bottom: 1px dotted #959595;
padding-bottom: 14px;
padding-bottom: 0.875rem;
margin-bottom: 14px;
margin-bottom: 0.875rem;
}

.exhibitor-list>.exhibitor-list-item:before,
.exhibitor-list>.exhibitor-list-item:after {
content: '';
display: table;
}

.exhibitor-list>.exhibitor-list-item:after {
clear: both;
}

.exhibitor-list>.exhibitor-list-item:last-child {
border-bottom: none;
margin-bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="list--unstyled exhibitor-category-list">
<li class="list-item active" id="bridal-attire">
<div class="item-wrap">
<div class="exhibitor-wrap">
<i class="exhibitor-icon icon-bridal-attire"></i>
<span class="exhibitor-category">Bridal Attire</span>
</div>
<div class="exhibitor-content block">
<h2 class="section-title section-title--primary-dark-med">Bridal Attire</h2>
<a href="#" class="close-link close-link--top">Close</a>
<ul class="list--unstyled exhibitor-list">
<li class="exhibitor-list-item">

<div class="exhibitor-logo">logo here</div>
<div class="exhibitor-details">

<h3 class="exhibitor-detail--title">Exhibitor 1</h3>
</div>
</li>
<li class="exhibitor-list-item">

<div class="exhibitor-logo">logo here</div>
<div class="exhibitor-details">

<h3 class="exhibitor-detail--title">Exhibitor 2</h3>
</div>
</li>
</ul>
<a href="#" class="close-link close-link--bottom">Close</a>
</div>
</div>
</li>
<li class="list-item" id="caterers">
<div class="item-wrap">
<div class="exhibitor-wrap">
<i class="exhibitor-icon icon-caterers"></i>
<span class="exhibitor-category">Caterers</span>
</div>
<div class="exhibitor-content">
<h2 class="section-title section-title--primary-dark-med">Caterers</h2>
<a href="#" class="close-link close-link--top">Close</a>
<ul class="list--unstyled exhibitor-list">
<li class="exhibitor-list-item">

<div class="exhibitor-logo">logo here</div>
<div class="exhibitor-details">

<h3 class="exhibitor-detail--title">Exhibitor 3</h3>


</div>
<!-- // exhibitor-details -->
</li>
</ul>
<a href="#" class="close-link close-link--bottom">Close</a>
</div>
</div>
</li>
<li class="list-item" id="coordinators">
<div class="item-wrap" style="transition: height 350ms ease; height: auto;">
<div class="exhibitor-wrap">
<i class="exhibitor-icon icon-coordinators"></i>
<span class="exhibitor-category">Coordinators</span>
</div>
<div class="exhibitor-content">
<h2 class="section-title section-title--primary-dark-med">Coordinators</h2>
<a href="#" class="close-link close-link--top">Close</a>
<ul class="list--unstyled exhibitor-list">
<li class="exhibitor-list-item">

<div class="exhibitor-logo">logo here</div>
<div class="exhibitor-details">

<h3 class="exhibitor-detail--title">Exhibitor 4</h3>

</div>
<!-- // exhibitor-details -->
</li>
</ul>
<a href="#" class="close-link close-link--bottom">Close</a>
</div>
</div>
</li>
<li class="list-item" id="florist-stylist">
<div class="item-wrap" style="transition: height 350ms ease; height: auto;">
<div class="exhibitor-wrap">
<i class="exhibitor-icon icon-florist-stylist"></i>
<span class="exhibitor-category">Florist &amp; Stylist</span>
</div>
<div class="exhibitor-content">
<h2 class="section-title section-title--primary-dark-med">Florist &amp; Stylist</h2>
<a href="#" class="close-link close-link--top">Close</a>
<ul class="list--unstyled exhibitor-list">
<li class="exhibitor-list-item">

<div class="exhibitor-logo">logo here</div>
<div class="exhibitor-details">

<h3 class="exhibitor-detail--title">Exhibitor 5</h3>

</div>
<!-- // exhibitor-details -->
</li>
</ul>
<a href="#" class="close-link close-link--bottom">Close</a>
</div>
</div>
</li>
<li class="list-item" id="photography">
<div class="item-wrap" style="transition: height 350ms ease; height: auto;">
<div class="exhibitor-wrap">
<i class="exhibitor-icon icon-photography"></i>
<span class="exhibitor-category">Photography</span>
</div>
<div class="exhibitor-content">
<h2 class="section-title section-title--primary-dark-med">Photography</h2>
<a href="#" class="close-link close-link--top">Close</a>
<ul class="list--unstyled exhibitor-list">
<li class="exhibitor-list-item">

<div class="exhibitor-logo">logo here</div>
<div class="exhibitor-details">

<h3 class="exhibitor-detail--title">Exhibitor 6</h3>

</div>
<!-- // exhibitor-details -->
</li>
</ul>
<a href="#" class="close-link close-link--bottom">Close</a>
</div>
</div>
</li>
<li class="list-item" id="videography">
<div class="item-wrap" style="transition: height 350ms ease; height: auto;">
<div class="exhibitor-wrap">
<i class="exhibitor-icon icon-videography"></i>
<span class="exhibitor-category">Videography</span>
</div>
<div class="exhibitor-content">
<h2 class="section-title section-title--primary-dark-med">Videography</h2>
<a href="#" class="close-link close-link--top">Close</a>
<ul class="list--unstyled exhibitor-list">
<li class="exhibitor-list-item">

<div class="exhibitor-logo">logo here</div>
<div class="exhibitor-details">

<h3 class="exhibitor-detail--title">Exhibitor 7</h3>

</div>
<!-- // exhibitor-details -->
</li>
</ul>
<a href="#" class="close-link close-link--bottom">Close</a>
</div>
</div>
</li>
</ul>

非常感谢任何帮助。谢谢。

最佳答案

您的点击处理程序存在冲突。在 .close-link 点击处理程序上使用 event.stopPropagation() 以防止点击冒泡并触发对 item 的点击p>

var item = $('.list-item');

$(item).click(function() {

$(this).addClass("active");
$(item).not(this).removeClass('active');
$(this).find('.exhibitor-content').addClass('block');
$(item).not(this).find('.exhibitor-content').removeClass('block');

var exhibitor_wrap = $(this).find('.exhibitor-wrap').height();
var exhibitor_content = $(this).find('.exhibitor-content').height();
var total_height = exhibitor_wrap + exhibitor_content + 28 + 56;

$(this).find('.item-wrap').css({
transition: 'height 350ms ease',
height: total_height + 'px'
});

$(item).not(this).find('.item-wrap').css({
transition: 'height 350ms ease',
height: 'auto'
});

});

$('.close-link').click(function(event) {

event.preventDefault();

$(this).parent().removeClass('block');
event.stopPropagation();

});
.future-exhibitor-links,
.exhibitor-list,
.list--unstyled {
margin-left: 0;
padding-left: 0;
list-style-type: none;
}

.exhibitor-category {
position: relative;
display: block;
font-size: 14px;
font-size: 0.875rem;
line-height: 1.5em;
text-transform: uppercase;
text-align: center;
}

.exhibitor-wrap {
padding-top: 28px;
padding-top: 1.75rem;
padding-bottom: 28px;
padding-bottom: 1.75rem;
padding-left: 10px;
padding-left: 0.625rem;
padding-right: 10px;
padding-right: 0.625rem;
}

.exhibitor-wrap:hover {
background-color: #f6f6f6;
cursor: pointer;
}

.exhibitor-wrap:hover .exhibitor-category {
color: #111;
}

.active .exhibitor-wrap {
background-color: #e1e1e1;
}

.active .exhibitor-wrap:hover {
background-color: #e1e1e1;
}

.exhibitor-icon {
display: block;
width: 50px;
width: 3.125rem;
height: 50px;
height: 3.125rem;
margin: 0 auto 7px;
margin: 0 auto 0.4375rem;
background-position: 0 0;
background-repeat: no-repeat;
}

.exhibitor-category-list {
position: relative;
margin-bottom: 28px;
margin-bottom: 1.75rem;
*zoom: 1;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}

.exhibitor-category-list:before,
.exhibitor-category-list:after {
content: '';
display: table;
}

.exhibitor-category-list:after {
clear: both;
}

.exhibitor-category-list > .list-item {
*zoom: 1;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
display: inline-block;
width: 50%;
}

.exhibitor-category-list > .list-item:before,
.exhibitor-category-list > .list-item:after {
content: '';
display: table;
}

.exhibitor-category-list > .list-item:after {
clear: both;
}

.exhibitor-category-list > .list-item:hover {
background-color: #f6f6f6;
}

@media screen and (min-width: 568px) {
.exhibitor-category-list > .list-item {
width: 33.33333333333333%;
}
}

@media screen and (min-width: 768px) {
.exhibitor-category-list > .list-item {
width: 25%;
}
}

.exhibitor-content {
position: absolute;
left: 0;
width: 100%;
background-color: #e1e1e1;
z-index: 3;
padding: 28px 28px 0;
padding: 1.75rem 28px 0;
padding: 1.75rem 1.75rem 0;
display: none;
}

.exhibitor-content.block {
display: block;
}

.exhibitor-list {
padding-bottom: 28px;
padding-bottom: 1.75rem;
}

.exhibitor-list > .exhibitor-list-item {
*zoom: 1;
border-bottom: 1px dotted #959595;
padding-bottom: 14px;
padding-bottom: 0.875rem;
margin-bottom: 14px;
margin-bottom: 0.875rem;
}

.exhibitor-list > .exhibitor-list-item:before,
.exhibitor-list > .exhibitor-list-item:after {
content: '';
display: table;
}

.exhibitor-list > .exhibitor-list-item:after {
clear: both;
}

.exhibitor-list > .exhibitor-list-item:last-child {
border-bottom: none;
margin-bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list--unstyled exhibitor-category-list">
<li class="list-item active" id="bridal-attire">
<div class="item-wrap">
<div class="exhibitor-wrap">
<i class="exhibitor-icon icon-bridal-attire"></i>
<span class="exhibitor-category">Bridal Attire</span>
</div>
<div class="exhibitor-content block">
<h2 class="section-title section-title--primary-dark-med">Bridal Attire</h2>
<a href="#" class="close-link close-link--top">Close</a>
<ul class="list--unstyled exhibitor-list">
<li class="exhibitor-list-item">

<div class="exhibitor-logo">logo here</div>
<div class="exhibitor-details">

<h3 class="exhibitor-detail--title">Exhibitor 1</h3>
</div>
</li>
<li class="exhibitor-list-item">

<div class="exhibitor-logo">logo here</div>
<div class="exhibitor-details">

<h3 class="exhibitor-detail--title">Exhibitor 2</h3>
</div>
</li>
</ul>
<a href="#" class="close-link close-link--bottom">Close</a>
</div>
</div>
</li>
<li class="list-item" id="caterers">
<div class="item-wrap">
<div class="exhibitor-wrap">
<i class="exhibitor-icon icon-caterers"></i>
<span class="exhibitor-category">Caterers</span>
</div>
<div class="exhibitor-content">
<h2 class="section-title section-title--primary-dark-med">Caterers</h2>
<a href="#" class="close-link close-link--top">Close</a>
<ul class="list--unstyled exhibitor-list">
<li class="exhibitor-list-item">

<div class="exhibitor-logo">logo here</div>
<div class="exhibitor-details">

<h3 class="exhibitor-detail--title">Exhibitor 3</h3>


</div>
<!-- // exhibitor-details -->
</li>
</ul>
<a href="#" class="close-link close-link--bottom">Close</a>
</div>
</div>
</li>
<li class="list-item" id="coordinators">
<div class="item-wrap" style="transition: height 350ms ease; height: auto;">
<div class="exhibitor-wrap">
<i class="exhibitor-icon icon-coordinators"></i>
<span class="exhibitor-category">Coordinators</span>
</div>
<div class="exhibitor-content">
<h2 class="section-title section-title--primary-dark-med">Coordinators</h2>
<a href="#" class="close-link close-link--top">Close</a>
<ul class="list--unstyled exhibitor-list">
<li class="exhibitor-list-item">

<div class="exhibitor-logo">logo here</div>
<div class="exhibitor-details">

<h3 class="exhibitor-detail--title">Exhibitor 4</h3>


</div>
<!-- // exhibitor-details -->
</li>
</ul>
<a href="#" class="close-link close-link--bottom">Close</a>
</div>
</div>
</li>
<li class="list-item" id="florist-stylist">
<div class="item-wrap" style="transition: height 350ms ease; height: auto;">
<div class="exhibitor-wrap">
<i class="exhibitor-icon icon-florist-stylist"></i>
<span class="exhibitor-category">Florist &amp; Stylist</span>
</div>
<div class="exhibitor-content">
<h2 class="section-title section-title--primary-dark-med">Florist &amp; Stylist</h2>
<a href="#" class="close-link close-link--top">Close</a>
<ul class="list--unstyled exhibitor-list">
<li class="exhibitor-list-item">

<div class="exhibitor-logo">logo here</div>
<div class="exhibitor-details">

<h3 class="exhibitor-detail--title">Exhibitor 5</h3>


</div>
<!-- // exhibitor-details -->
</li>
</ul>
<a href="#" class="close-link close-link--bottom">Close</a>
</div>
</div>
</li>
<li class="list-item" id="photography">
<div class="item-wrap" style="transition: height 350ms ease; height: auto;">
<div class="exhibitor-wrap">
<i class="exhibitor-icon icon-photography"></i>
<span class="exhibitor-category">Photography</span>
</div>
<div class="exhibitor-content">
<h2 class="section-title section-title--primary-dark-med">Photography</h2>
<a href="#" class="close-link close-link--top">Close</a>
<ul class="list--unstyled exhibitor-list">
<li class="exhibitor-list-item">

<div class="exhibitor-logo">logo here</div>
<div class="exhibitor-details">

<h3 class="exhibitor-detail--title">Exhibitor 6</h3>


</div>
<!-- // exhibitor-details -->
</li>
</ul>
<a href="#" class="close-link close-link--bottom">Close</a>
</div>
</div>
</li>
<li class="list-item" id="videography">
<div class="item-wrap" style="transition: height 350ms ease; height: auto;">
<div class="exhibitor-wrap">
<i class="exhibitor-icon icon-videography"></i>
<span class="exhibitor-category">Videography</span>
</div>
<div class="exhibitor-content">
<h2 class="section-title section-title--primary-dark-med">Videography</h2>
<a href="#" class="close-link close-link--top">Close</a>
<ul class="list--unstyled exhibitor-list">
<li class="exhibitor-list-item">

<div class="exhibitor-logo">logo here</div>
<div class="exhibitor-details">

<h3 class="exhibitor-detail--title">Exhibitor 7</h3>


</div>
<!-- // exhibitor-details -->
</li>
</ul>
<a href="#" class="close-link close-link--bottom">Close</a>
</div>
</div>
</li>
</ul>

关于jquery - 无法覆盖 jquery 中的上一个点击功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42351565/

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