代码之家 › 专栏 › 技术社区 › Stark

多个切换框打开而不是1

jquery javascript

Stark · 技术社区 · 6 年前

我创建了一个自定义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

3 回复 | 直到 6 年前

Taplar 6 年前

尝试将单击器处理程序更改为以下内容:

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

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

Akrion 6 年前

自从你 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;
    }
});

Unmitigated 6 年前

全局变量容器获取具有 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