javascript - 多个切换框打开而不是 1

Question

我有一些资源(信息、链接等)我想隐藏起来，虽然未完成但它按预期工作，我目前遇到的唯一问题是打开了多个框，而不仅仅是我点击的框切换。 (我以前遇到过这个问题并很容易地解决了它，但它直接是 javascript，而现在我正在使用 PHP 来输出动态数据)。

我创建了一个自定义 html footnote-id 标记，作为按钮点击的唯一标识符，但我不确定如何将其附加到目标点击。

这是一个 fiddle .

var button = $(".footnote-button");
var container = $(button.next());
var content = $(button.next().find(".footnote-content-data"));
var readmore = $(button.next().find(".footnote-readmore"));

button.on('click', function(e){
  container.fadeToggle();
});

// Hide container if clicked outside container
$(document).mouseup(function(event){
    if(!container.is(event.target) && !button.is(event.target)  && !content.is(event.target) && container.is(":visible")){
       container.fadeToggle();
    } else{
      return false;
    }
});

// Check if container scrollbar has reached the bottom
$(content).on('scroll', function(){
	if(content[0].scrollHeight - content.scrollTop() - content[0].clientHeight < 1){
  	readmore.fadeOut();
  } else {
  	readmore.fadeIn();
  }
});

p {
  font-size: 16px;
  font-family: 'Open Sans'
}

.footnote {
  position: relative;
}

.footnote-button {
  border-radius: 50%;
  text-align: center;
  position: relative;
  z-index: 5;
  box-sizing: border-box;
  display: inline-block;
  margin: 10px 0.3em 0 0.2em;
  cursor: pointer;
  background-color: #ccc;
  color: white;
  vertical-align: middle;
  text-align: center;
  font-size: 0.75rem;
  transition-property: opacity;
  transition-duration: 0.25s;
  width: 1rem;
  height: 1rem;
  line-height: 1rem;
}

.footnote-container {
  display: none;
  position: absolute;
  z-index: 120;
  width: 22em;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  border: 1px solid #c3c3c3;
  background: #fafafa;
  left: -77px;
  top: 45px;
  max-height: 350px;
}

.footnote-arrow {
  position: absolute;
  box-sizing: border-box;
  margin-left: -0.65em;
  width: 1.3em;
  height: 1.3em;
  transform: rotate(45deg);
  background: #fafafa;
  border: 1px solid #c3c3c3;
  box-shadow: 0px 0px 8px rgba(255, 255, 255, 0.3);
  border-top-left-radius: 0;
  top: -10px;
  z-index: -1;
  left: 87px;
}

.footnote-content {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.footnote-content-data {
  color: #797979;
  font-size: 16px;
  font-family: 'Open Sans', sans-serif;
  overflow-y: scroll;
  height: 310px;
  margin-right: -50px;
  padding-right: 70px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
}

.footnote-content::before {
  content: "";
  background-image: -webkit-linear-gradient(top, #fafafa 50%, rgba(250, 250, 250, 0) 100%);
  height: 1.1em;
  top: 0;
  width: 100%;
  position: absolute;
  border-radius: 8px;
}

.footnote-content::after {
  content: "";
  background-image: -webkit-linear-gradient(bottom, #fafafa 50%, rgba(250, 250, 250, 0) 100%);
  height: 1.1em;
  bottom: 0;
  width: 100%;
  position: absolute;
  border-radius: 8px;
}

.footnote-readmore {
  position: absolute;
  bottom: 0.3375em;
  left: 0.3375em;
  z-index: 14;
  display: block;
  height: 0.78125em;
  width: 0.625em;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSIxNXB4IiB2aWV3Qm94PSIwIDAgMTIgMTUiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pbllNaW4iPgogICAgPGcgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IkFycm93IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxLjAwMDAwMCwgMS4wMDAwMDApIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiPgogICAgICAgICAgICA8cGF0aCBkPSJNNSwwIEw1LDExLjUiIGlkPSJMaW5lIj48L3BhdGg+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLjUsNy41IEw1LjAyNzY5Mjc5LDEyLjAyNzY5MjgiIGlkPSJMaW5lIj48L3BhdGg+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik00LjUsNy41IEw5LjAyNzY5Mjc5LDEyLjAyNzY5MjgiIGlkPSJMaW5lLTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDcuMDAwMDAwLCAxMC4wMDAwMDApIHNjYWxlKC0xLCAxKSB0cmFuc2xhdGUoLTcuMDAwMDAwLCAtMTAuMDAwMDAwKSAiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=');
  background-size: cover;
  opacity: 0.1;
  transition-duration: 0.25s;
  transition-timing-function: ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="display: flex;">
  <p>Some paragraph so it's not empty.</p>
  <div class="footnote">
    <span class="footnote-button" footenote-id="1">1</span>
    <div class="footnote-container">
      <div class="footnote-arrow"></div>
      <div class="footnote-content">
      <span class="footnote-readmore"></span>
        <div class="footnote-content-data">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam elementum nunc nunc, a pulvinar eros semper id. Donec et mauris tellus. Nulla facilisi. Sed eu pellentesque nisl, ut placerat orci. Etiam tempus metus ex, eu vulputate urna tincidunt quis.
          Donec commodo, ligula id pretium ultricies, nisl ex congue risus, ut tempor leo nisl nec neque. Pellentesque porta vehicula lacus, vitae scelerisque ligula. Sed in lacus a nisl sodales lacinia. Aenean consectetur placerat libero nec varius.
          Sed ut leo condimentum, condimentum odio a, tincidunt lorem. Ut ut blandit ex. Aenean libero felis, tincidunt nec tristique a, fermentum quis dui. Cras in eros euismod, sollicitudin dolor in, tempus massa. Ut sollicitudin lorem ut erat tempus,
          sed varius nisl commodo. Fusce in feugiat dui, non sagittis tellus. Donec urna dolor, consequat eget facilisis id, ultrices vitae sapien. Nullam at fringilla nisi. Nulla sagittis egestas urna vel viverra. Nulla eu nunc a elit pretium dignissim.
          Mauris eget cursus nisl. Integer congue malesuada condimentum. Nunc volutpat ligula et placerat malesuada. Cras hendrerit, tortor non viverra imperdiet, erat dolor laoreet nisl, a vestibulum neque lacus sollicitudin justo.
        </div>
        
      </div>
    </div>
  </div>

</div>

<div style="display: flex;">
  <p>A different paragraph for this second box.</p>
  <div class="footnote">
    <span class="footnote-button" footenote-id="2">2</span>
    <div class="footnote-container">
      <div class="footnote-arrow"></div>
      <div class="footnote-content">
      <span class="footnote-readmore"></span>
        <div class="footnote-content-data">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam elementum nunc nunc, a pulvinar eros semper id. Donec et mauris tellus. Nulla facilisi. Sed eu pellentesque nisl, ut placerat orci. Etiam tempus metus ex, eu vulputate urna tincidunt quis.
          Donec commodo, ligula id pretium ultricies, nisl ex congue risus, ut tempor leo nisl nec neque. Pellentesque porta vehicula lacus, vitae scelerisque ligula. Sed in lacus a nisl sodales lacinia. Aenean consectetur placerat libero nec varius.
          Sed ut leo condimentum, condimentum odio a, tincidunt lorem. Ut ut blandit ex. Aenean libero felis, tincidunt nec tristique a, fermentum quis dui. Cras in eros euismod, sollicitudin dolor in, tempus massa. Ut sollicitudin lorem ut erat tempus,
          sed varius nisl commodo. Fusce in feugiat dui, non sagittis tellus. Donec urna dolor, consequat eget facilisis id, ultrices vitae sapien. Nullam at fringilla nisi. Nulla sagittis egestas urna vel viverra. Nulla eu nunc a elit pretium dignissim.
          Mauris eget cursus nisl. Integer congue malesuada condimentum. Nunc volutpat ligula et placerat malesuada. Cras hendrerit, tortor non viverra imperdiet, erat dolor laoreet nisl, a vestibulum neque lacus sollicitudin justo.
        </div>
        
      </div>
    </div>
  </div>

</div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>a

Answer 1

尝试将您的答题器处理程序更改为以下内容:

button.on('click', function(e){
  $(e.target).next().fadeToggle();
});

当您单击按钮时，您想要触发它后面的容器。现在您的容器元素包含多个元素，而不仅仅是您单击的按钮之后的元素。