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

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() 非常有用。

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

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

更新

我更能理解您的需求。我更新了上面的代码以帮助确定文本的当前状态。如果它已展开，请将其折叠。但总而言之，无论单击的是什么按钮，都可以折叠文本并显示图像。