javascript - 使用 CSS/jQuery 进行元素操作

Question

我正在做一些操作，大概是用 jQuery，这很像以前在这里提出的问题: Hide and show divID with Javascript - Hide when new title is opened

我已经解决了我的问题。我正在研究一些药丸/标签，其中每个药丸分为三个部分，每个部分都包含“阅读更多”的可能性，这就是显示/隐藏发挥作用的地方。我的jsfiddle在这里:https://jsfiddle.net/jwb99gw1/6/

<div class="container">
  <h2>Pills</h2>
  <ul class="nav nav-pills">
    <li class="active"><a data-toggle="pill" href="#home">Home</a></li>
    <li><a data-toggle="pill" href="#menu1">Menu 1</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
        <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-3">
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <a class="" href="#a">Read more</a>
        </div>

        <div class="col-lg-3 col-md-3 col-sm-3">
      <h3>Header</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <a href="#b">Read more</a>
        </div>

        <div class="col-lg-3 col-md-3 col-sm-3">
      <h3>Something else</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <a href="#c">Read more</a>
        </div>
        </div>
        <div id="a">Lorem ipsum (A)</div>
        <div id="b">Lorem ipsum (B)</div>
        <div id="c">Lorem ipsum (C)</div>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </div>
</div>

目前，我已经制作了一个纯粹基于 CSS 的解决方案，但它无法处理 UX。我希望“阅读更多”切换到“隐藏文本”，一旦单击，当然如果在该状态下单击，则隐藏文本。理想情况下，切换药丸/标签也应该隐藏元素。

与我一开始链接的问题相比，我的问题有一些不同之处。这些元素不是相互包围的，所以我认为“this”关键字不起作用，至少不完全是上一个问题的处理方式。

您将如何解决这个问题？必须有比 ID by ID jQuery 处理更智能的解决方法。

Answer 1

我将 .display-box 添加到您的 .container 中。

HTML

<div class="container display-box">
    ...
        <a data-target="#a">Read more</a>
        <a data-target="#b">Read more</a>
        <a data-target="#c">Read more</a>
    ...
        <div id="a" class="box">Lorem ipsum (A)</div>
        <div id="b" class="box">Lorem ipsum (B)</div>
        <div id="c" class="box">Lorem ipsum (C)</div>
    ...
</div>

JQuery

$(".display-box").each(function () {
    var $this = $(this);
    $this.find("[data-target]").each(function () {
        $(this).click(function () {
            $($this.data("visible")).hide();
            $("[data-target='"+$this.data("visible")+"']").text("Read more");
            if ($this.data("visible") !== $(this).data("target")) {
                $this.data("visible", $(this).data("target"));
                $(this).text("Hide text");
                $($this.data("visible")).show();
            } else {
                $this.data("visible", "")
            }
        });
    });
})

CSS

.box {
    display:none;
}

jsfiddle:https://jsfiddle.net/jwb99gw1/11/

说明

基本上，这会迭代每个 .displaybox 并查找具有属性 data-target 的每个元素，然后为每个元素添加一个点击事件监听器。

它隐藏了 .display-box 的数据 data-visible 中指定的元素，但此数据对检查器隐藏。然后，它从点击的链接中获取 data-target 的值，并将其存储回 data-visible 中。然后它显示 data-visible 中指定的元素，该元素是单击的链接的目标。