多个切换框打开而不是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

尝试将Clicker处理程序更改为以下内容：

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

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

Answer 2

由于您的button变量选择了您的处理程序将应用的多个元素并对其执行操作。要解决主要问题，您需要使用以下任一方法：

$(e.target).next().fadeToggle(); // OR
$(e.target).siblings().fadeToggle(); // Other ways are via .parent().children() etc

现在进入第二个问题：

您在$(document).mouseup(function(event)上附加了一个处理程序，当用户尝试单击背景时，您将打开下一个工具提示，这是一个无限循环（同样由于容器选择器是一个数组）。

要解决此问题，请将您的mouseup处理程序更改为此：

$(document).mouseup(function(event){
        console.dir(event.target);    
    if(!container.is(event.target) && !button.is(event.target)  && !content.is(event.target) && container.is(":visible")){
         container.each(function(i, el) {
                $el = $(el)
                if($el.is(':visible'))
                    $el.fadeToggle();
             })
    } else{
      return false;
    }
});

除非这是一种理想的行为，在这种情况下，请告诉我：）

Answer 3

全局变量容器使用类footnote-button获取元素的所有第一个直接同级。您想要获得具有单击的footnote-button类的元素的直接同级。

更改

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

收件人

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

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){
  $(this).next().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