Question

我想显示/隐藏切换我正在处理的项目上显示的文字，当我点击标题时。我点击标题时设法显示内容，但我无法隐藏当时不需要显示的内容。我的想法是，如果我点击标题1，则div id =“content1”中的内容会显示。当我点击title2时，只有id = content2的div显示等。

提前谢谢大家，

Jquery链接：https://jsfiddle.net/dt32wshj/3/


'ascii' codec can't encode character '\xe1' in position

JQuery的

   <div class="wrap">
   <h1 class="showcontent" id="1">Text 1</h1>
    <div class="content" id="content1">
      <h3 id="sub1">Sub 1.1</h3>
        <div class="sub" id="Xsub1"><p>Para 1.1</p></div>
      <h3 id="sub2">Sub 1.2</h3>
        <div class="sub" id="Xsub2"><p>Para 1.2</p></div>
    </div>
</div>

<div class="wrap">
  <h1 class="showcontent" id="2">Title 2</h1>
    <div class="content" id="content2">
      <h3 id="sub3">Sub 2.1</h3>
        <div class="sub" id="Xsub3"><p>Para 2.1</p></div>
      <h3 id="sub4">Sub 2.2</h3>
        <div class="sub" id="Xsub4"><p>Para 2.2</p></div>
    </div>
</div>
  <div class="wrap">
    <h1 class="showcontent" id="3">Title 3</h1>
  <div class="content" id="content3">
  <h3 id="sub5">Sub 3.1</h3>
  <div class="sub" id="Xsub5"><p>Para 3.1</p></div>
  <h3 id="sub6">Sub 3.2</h3>
  <div class="sub" id="Xsub6"><p>Para 3.2</p></div>
  </div>
</div>

Answer 1

我们的想法是，在显示当前内容之前，您必须隐藏所有其他内容

并且您可以在不使用ID的情况下执行此操作，尤其是如果您拥有大量内容，则使用类更合适

同样适用于内部内容

$(document).ready(function() {
  $(".showcontent").click(function() {
    $(".content").hide();
    $(this).next(".content").fadeIn(1000);
  });
  $(".content h3").click(function() {
     $(".sub").slideUp(500);
    $(this).next(".sub").slideDown(500);
  });

});

.sub {
  display: none;
}

.content {
  display: none;
}

h1 {
  cursor: pointer;
}

h1:hover {
  color: blue;
}

h3 {
  cursor: pointer;
}

h3:hover {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  <h1 class="showcontent" id="1">Text 1</h1>
  <div class="content" id="content1">
    <h3 id="sub1">Sub 1.1</h3>
    <div class="sub" id="Xsub1">
      <p>Para 1.1</p>
    </div>
    <h3 id="sub2">Sub 1.2</h3>
    <div class="sub" id="Xsub2">
      <p>Para 1.2</p>
    </div>
  </div>
</div>

<div class="wrap">
  <h1 class="showcontent" id="2">Title 2</h1>
  <div class="content" id="content2">
    <h3 id="sub3">Sub 2.1</h3>
    <div class="sub" id="Xsub3">
      <p>Para 2.1</p>
    </div>
    <h3 id="sub4">Sub 2.2</h3>
    <div class="sub" id="Xsub4">
      <p>Para 2.2</p>
    </div>
  </div>
</div>
<div class="wrap">
  <h1 class="showcontent" id="3">Title 3</h1>
  <div class="content" id="content3">
    <h3 id="sub5">Sub 3.1</h3>
    <div class="sub" id="Xsub5">
      <p>Para 3.1</p>
    </div>
    <h3 id="sub6">Sub 3.2</h3>
    <div class="sub" id="Xsub6">
      <p>Para 3.2</p>
    </div>
  </div>
</div>

Answer 2

你可以只用javascript来实现这一点，只需在点击时隐藏相关的类，然后只显示点击的那个：

（您可以使用.fadeout而不是.hide，具体取决于您的偏好）

$(document).ready(function() {

  $(".showcontent").click(function() {
    var name = $(this).attr('id');
    $(".content").hide();
    $("#content" + name).fadeIn(1000);
  });

  $(".content h3").click(function() {
    var sub = $(this).attr('id');
    $(".sub").hide();
    $("#X" + sub).slideDown(500);
  });

});

Answer 3

您可以通过多种方式实现这一目标。一种是在var中保存当前打开的id，并在打开另一个div时关闭它：

＆＃13;

$(document).ready(function(){

           //hide all content
          $("[id^=content]").hide();
          
          var currentShown = -1;

          $(".showcontent").click(function () {
           var name = $(this).attr('id');
           if (currentShown == name) return;
          //hide currently shown
          $("#content" + currentShown).fadeOut(1000);
          $("#content" + name).fadeIn(1000);
          currentShown = name;
         });
          
          
          $(".content h3").click(function () {
           var sub = $(this).attr('id');
          $("#X" + sub).slideDown(500);
            });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
   <h1 class="showcontent" id="1">Text 1</h1>
    <div class="content" id="content1">
      <h3 id="sub1">Sub 1.1</h3>
        <div class="sub" id="Xsub1"><p>Para 1.1</p></div>
      <h3 id="sub2">Sub 1.2</h3>
        <div class="sub" id="Xsub2"><p>Para 1.2</p></div>
    </div>
</div>

<div class="wrap">
  <h1 class="showcontent" id="2">Title 2</h1>
    <div class="content" id="content2">
      <h3 id="sub3">Sub 2.1</h3>
        <div class="sub" id="Xsub3"><p>Para 2.1</p></div>
      <h3 id="sub4">Sub 2.2</h3>
        <div class="sub" id="Xsub4"><p>Para 2.2</p></div>
    </div>
</div>
  <div class="wrap">
    <h1 class="showcontent" id="3">Title 3</h1>
  <div class="content" id="content3">
  <h3 id="sub5">Sub 3.1</h3>
  <div class="sub" id="Xsub5"><p>Para 3.1</p></div>
  <h3 id="sub6">Sub 3.2</h3>
  <div class="sub" id="Xsub6"><p>Para 3.2</p></div>
  </div>
</div>

＆＃13;

单击多个ID时显示/隐藏文本

3 个答案: