点击按钮隐藏图像并显示文本

Question

jQuery(".b2b-btn").click(function() {
jQuery(".b2b-image").removeClass('hideb2bimage');
jQuery(".b2b-text").removeClass('expanded');
jQuery(this).closest('col-b2b').find(".b2b-image").toggleClass('hideb2bimage');
jQuery(this).closest('col-b2b').find(".b2b-text").toggleClass('expanded');

});

.hideb2bimage {
height: 0px;
visibility: hidden;
}
.b2b-text {
height: 0px;
visibility: hidden;
opacity: 0;
transition: visibility 0s ease-out 500ms, opacity 500ms;
}
.expanded {
height: auto;
visibility: visible;
opacity: 1;
transition: visibility 0s ease-in 0s, opacity 500ms;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-row">
<div class="col-b2b">
<img class="b2b-image" scr="https://picsum.photos/200/300?random=1">
<p class="b2b-text">this is some text</p>
<button class="b2b-btn">Please Click</button>
</div>
<div class="col-b2b">
<img class="b2b-image" scr="https://picsum.photos/200/300?random=2">
<p class="b2b-text">this is some text</p>
<button class="b2b-btn">Please Click</button>
</div>
<div class="col-b2b">
<img class="b2b-image" scr="https://picsum.photos/200/300?random=3">
<p class="b2b-text">this is some text</p>
<button class="b2b-btn">Please Click</button>
</div>
</div>

我想在点击按钮时显示文本和隐藏图像。但是我只想显示被单击按钮的列的文本。此外，在情况下有人点击第一列，它显示了一列的文本，然后点击第二列按钮，它应该隐藏第一列的文本。以上是我使用的代码，请让我知道我犯了什么错误。我还想让点击功能的图像以及。

Answer 1

几个打字错误和一些css错误:

• jQuery(this).closest('col-b2b')应该是jQuery(this).closest('.col-b2b')
• <img class="b2b-image" scr="应为<img class="b2b-image" src="
• visibility不能转换。使用opacity代替。
• height和其他长度不能转换为auto值。用动画化max-height代替。

jQuery(".b2b-btn").click(function() {
jQuery(".b2b-image").removeClass('hideb2bimage');
jQuery(".b2b-text").removeClass('expanded');
jQuery(this).closest('.col-b2b').find(".b2b-image").toggleClass('hideb2bimage');
jQuery(this).closest('.col-b2b').find(".b2b-text").toggleClass('expanded');
});

.b2b-image {
max-height: 100vh;
opacity: 1;
transition: all 0.5s ease-in;
}
.hideb2bimage {
max-height: 0;
opacity: 0;
}
.b2b-text {
height: 0;
opacity: 0;
transition: all 0.5s ease-out;
}
.expanded {
height: auto;
opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-row">
<div class="col-b2b">
<img class="b2b-image" src="https://picsum.photos/200/300?random=1">
<p class="b2b-text">this is some text</p>
<button class="b2b-btn">Please Click</button>
</div>
<div class="col-b2b">
<img class="b2b-image" src="https://picsum.photos/200/300?random=2">
<p class="b2b-text">this is some text</p>
<button class="b2b-btn">Please Click</button>
</div>
<div class="col-b2b">
<img class="b2b-image" src="https://picsum.photos/200/300?random=3">
<p class="b2b-text">this is some text</p>
<button class="b2b-btn">Please Click</button>
</div>
</div>

Answer 2

这是一个没有任何闪烁的平滑过渡的建议:

• 修复scr到src的图像属性
• 创建通用包装器DIV.b2b-cont为文本和图像
• 将图像设置为绝对底层，几乎作为背景图像
• 使用CSS Flex文本长度决定了框的高度
• 切换到JS像.is-active这样的类来自最接近的列的父母。删除.is-active从所有其他列

例子:

jQuery(($) => { // DOM ready and $ alias in scope
$(".b2b-btn").on("click", function() {
const $col = $(this).closest(".col-b2b");
const $otherCol = $(this).closest(".main-row").find(".col-b2b").not($col);
$col.toggleClass("is-active");
$otherCol.removeClass("is-active"); 
});
});

/*QuickReset*/ * {margin:0; box-sizing: border-box;}
.main-row {
display: flex;
}
.col-b2b {
display: flex;
flex-flow: column;
flex: 1;
}
.b2b-cont {
flex: 1;
position: relative;
}
.b2b-image {
position: absolute;
height: 100%;
width: 100%;
object-fit: cover;
transition: 0.3s;
}
.b2b-text {
padding: 1em;
visibility: hidden;
opacity: 0;
transition: 0.3s;
}
.col-b2b.is-active .b2b-text {
visibility: visible;
opacity: 1;
}
.col-b2b.is-active .b2b-image {
visibility: hidden;
opacity: 0;
}

<div class="main-row">
<div class="col-b2b">
<div class="b2b-cont">
<img class="b2b-image" src="https://picsum.photos/200/300?random=1">
<p class="b2b-text">this is some text</p>
</div>
<button class="b2b-btn" type="button">Please Click</button>
</div>
<div class="col-b2b">
<div class="b2b-cont">
<img class="b2b-image" src="https://picsum.photos/200/300?random=2">
<p class="b2b-text">this is some text</p>
</div>
<button class="b2b-btn" type="button">Please Click</button>
</div>
<div class="col-b2b">
<div class="b2b-cont">
<img class="b2b-image" src="https://picsum.photos/200/300?random=3">
<p class="b2b-text">This text, since it's the longest, it dictates all other elements heights thanks to CSS flex. If you learn CSS flex there's no going back, you can only start to learn to cook, pet your cat, dry-leaf-jumping...</p>
</div>
<button class="b2b-btn" type="button">Please Click</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Answer 3

考虑以下内容:

jQuery(function($) {
$(".b2b-btn").click(function() {
var btn = $(this);
var img = btn.parent().find("img");
var txt = btn.parent().find("p");
var state = txt.hasClass("expanded");
$(".main-row .b2b-text").removeClass("expanded");
$(".main-row .b2b-image").removeClass("hideb2bimage");
if (state) {
img.removeClass("hideb2bimage");
txt.removeClass("expanded");
} else {
img.addClass("hideb2bimage");
txt.addClass("expanded");
}
});
});

.col-b2b {
display: inline-block;
width: 200px;
}
.hideb2bimage {
display: none;
}
.b2b-text {
display: none;
}
.expanded {
display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-row">
<div class="col-b2b">
<img class="b2b-image" src="https://picsum.photos/200/300?random=1">
<p class="b2b-text">this is some text</p>
<button class="b2b-btn">Please Click</button>
</div>
<div class="col-b2b">
<img class="b2b-image" src="https://picsum.photos/200/300?random=2">
<p class="b2b-text">this is some text</p>
<button class="b2b-btn">Please Click</button>
</div>
<div class="col-b2b">
<img class="b2b-image" src="https://picsum.photos/200/300?random=3">
<p class="b2b-text">this is some text</p>
<button class="b2b-btn">Please Click</button>
</div>
</div>

在这些用例中使用.toggleClass()真的很有帮助。

描述:根据类的存在或state参数的值，在匹配元素集中的每个元素中添加或删除一个或多个类。

https://api.jquery.com/toggleclass/

我能更好地理解你的需求。我已经更新了上面的代码来帮助确定文本的当前状态。如果它膨胀了，就使它坍缩。但是，无论点击哪个按钮，都可以折叠文本并显示图像。