折叠的页面上的相同div ID

时间：2017-01-13 11:01:31

标签： javascript jquery html css

我在同一页面上有两个div，ID相同。我想探索一个div的描述。在我的情况下，如果我点击div，则所有desc都会展开。

＆＃13;
＆＃13; 
$(document).ready(function() {
  var collapsed = "image";

  $("#shw_desc").click(function() {
    if ($(".desc").is(":visible")) {
      $(".desc").slideUp();
      $("#shw_desc_icon img").attr("src", collapsed).css("transform", "rotate(0deg)");
    } else {
      $(".desc").slideDown();
      $("#shw_desc_icon img").attr("src", collapsed).css("transform", "rotate(180deg)");
    }
  });
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="shw_desc" style="background-color: #dfdfdf;font-size: 14px;float: left;padding: 4px 12px;width: 90.3%;color: #666;" class="nt_selected">
  <span>Description</span><span id="shw_desc_icon" style="float:right;" class="glyphicon glyphicon-chevron-right"><img class="block-hider-hide" alt="Hide Administration block" src="image" tabindex="0" title="Hide Administration block"></span>
</div>
<div class="desc" style="display:none;border: 1px solid #eee;padding: 6px 12px;color: #999;font-size: 13px;width:90%;float: left;">
  <p>Some Description</p>
</div>

<div id="shw_desc" style="background-color: #dfdfdf;font-size: 14px;float: left;padding: 4px 12px;width: 90.3%;color: #666;" class="nt_selected">
  <span>Description 2</span><span id="shw_desc_icon" style="float:right;" class="glyphicon glyphicon-chevron-right"><img class="block-hider-hide" alt="Hide Administration block" src="image" tabindex="0" title="Hide Administration block"></span>
</div>
<div class="desc" style="display:none;border: 1px solid #eee;padding: 6px 12px;color: #999;font-size: 13px;width:90%;float: left;">
  <p>Some Description 2</p>
</div>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：0)

  

我在同一页面上有两个div，ID相同

这在HTML中无效。 id属性在页面中必须是唯一的。更改标记以改为在这些元素上使用公共类属性。

从那里你可以使用this关键字来引用引发click事件的元素，并找到应该修改的相关元素。

另请注意，您可以在slideToggle()语句上使用toggleClass()和if来简化JS代码中的逻辑，并且可以通过将内联样式放入其中来简化HTML样式表。试试这个：

＆＃13;
＆＃13; 
$(document).ready(function() {
  var collapsed = "image";

  $(".shw_desc").click(function() {
    $(this).toggleClass('open').next('.desc').slideToggle();
    $(this).find(".shw_desc_icon img").attr("src", collapsed);
  });
});
＆＃13; 
.shw_desc {
  background-color: #dfdfdf;
  font-size: 14px;
  float: left;
  padding: 4px 12px;
  width: 90.3%;
  color: #666
}
.shw_desc_icon {
  float: right;
  transform: rotate(0deg);
}
.shw_desc.open .shw_desc_icon {
  transform: rotate(180deg);
}
.desc {
  display: none;
  border: 1px solid #eee;
  padding: 6px 12px;
  color: #999;
  font-size: 13px;
  width: 90%;
  float: left;
}
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="shw_desc nt_selected">
  <span>Description 1</span>
  <span class="shw_desc_icon glyphicon glyphicon-chevron-right">
    <img class="block-hider-hide" alt="Hide Administration block" src="image" tabindex="0" title="Hide Administration block">
  </span>
</div>
<div class="desc">
  <p>Some Description 1</p>
</div>
<div class="shw_desc nt_selected">
  <span>Description 2</span>
  <span class="shw_desc_icon glyphicon glyphicon-chevron-right">
    <img class="block-hider-hide" alt="Hide Administration block" src="image" tabindex="0" title="Hide Administration block">
  </span>
</div>
<div class="desc">
  <p>Some Description 2</p>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

标识符应该是唯一的，并且被视为无效的Html。

我建议确保使用类或数据属性来选择元素，以及生成Html的内容确保使用唯一标识符，或者如果不需要则将它们全部放在一起。

  

但是，假设您可能无法更改生成的HTML，我将使用您的确切标记，并且仅应用最少的金额   脚本中的更改使其工作。

对于click事件，您可以在选择器中使用[id=identifier]代替#identifier，例如$("[id=shw_desc]").click(function() {

这适用于按属性选择可以返回多个结果，但是，当按标识符$(#...)选择时，jQuery将仅返回第一个匹配。

在点击事件处理程序代码中，请确保始终保持在当前上下文中。 无论您使用哪个选择器绑定click处理程序，这都适用。

如果点击了shw_desc，您就不想处理所有.desc个元素，只需处理当前shw_desc旁边的元素。

#shw_desc_icon img相同，您只想处理点击的shw_desc内的图片，而不是页面上的所有其他图片。为此，您可以使用类似于$("#shw_desc_icon img", this)

的选择器

＆＃13;
＆＃13; 
$(document).ready(function() {
  var collapsed = "image";

  // Select by attribute to bind to ALL shw_desc elements not just the first one
  $("[id=shw_desc]").click(function() {
    var $desc = $(this).next('.desc'); //Get the .desc element next to the current context.
    
    if ($desc.is(":visible")) {
      $desc.slideUp();
      
      // Use ',this' to ensure you only query for #shw_desc_icon within the current context.
      $("#shw_desc_icon img", this).attr("src", collapsed).css("transform", "rotate(0deg)");
    } else {
      $desc.slideDown();
      $("#shw_desc_icon img", this).attr("src", collapsed).css("transform", "rotate(180deg)");
    }
  });
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="shw_desc" style="background-color: #dfdfdf;font-size: 14px;float: left;padding: 4px 12px;width: 90.3%;color: #666;" class="nt_selected">
  <span>Description</span><span id="shw_desc_icon" style="float:right;" class="glyphicon glyphicon-chevron-right"><img class="block-hider-hide" alt="Hide Administration block" src="image" tabindex="0" title="Hide Administration block"></span>
</div>
<div class="desc" style="display:none;border: 1px solid #eee;padding: 6px 12px;color: #999;font-size: 13px;width:90%;float: left;">
  <p>Some Description</p>
</div>

<div id="shw_desc" style="background-color: #dfdfdf;font-size: 14px;float: left;padding: 4px 12px;width: 90.3%;color: #666;" class="nt_selected">
  <span>Description 2</span><span id="shw_desc_icon" style="float:right;" class="glyphicon glyphicon-chevron-right"><img class="block-hider-hide" alt="Hide Administration block" src="image" tabindex="0" title="Hide Administration block"></span>
</div>
<div class="desc" style="display:none;border: 1px solid #eee;padding: 6px 12px;color: #999;font-size: 13px;width:90%;float: left;">
  <p>Some Description 2</p>
</div>
＆＃13;
＆＃13;
＆＃13;

再一次，说了这么多，试着摆脱重复的标识符，并使用这些元素的其他常见属性来选择它们。 当然，情境感知仍然适用。

答案 2 :(得分：0)

或想法 

$(document).ready(function() {
      var collapsed = "image";
    
      $(".meclick").click(function() {
      		var $box = $(this).parents('.box:first');
          if(!$box.find('.desc:first').hasClass('visible'))
          {
            $box.find('.desc:first').addClass('visible');
            $box.find('.desc:first').slideDown();
            $box.find('.desc:first').find("#shw_desc_icon img:first").attr("src", collapsed).css("transform", "rotate(0deg)");
          }
          else
          {
          	$box.find('.desc:first').removeClass('visible');
            $box.find('.desc:first').slideUp();
            $box.find('.desc:first').find("#shw_desc_icon img:first").attr("src", collapsed).css("transform", "rotate(180deg)");
          }
    
    
      });
    });
.visible{}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
    
    <div id="shw_desc" style="background-color: #dfdfdf;font-size: 14px;float: left;padding: 4px 12px;width: 90.3%;color: #666;" class="meclick nt_selected">
      <span>Description</span><span id="shw_desc_icon" style="float:right;" class="glyphicon glyphicon-chevron-right"><img class="block-hider-hide" alt="Hide Administration block" src="image" tabindex="0" title="Hide Administration block"></span>
    </div>
    <div class="desc" style="display:none;border: 1px solid #eee;padding: 6px 12px;color: #999;font-size: 13px;width:90%;float: left;">
      <p>Some Description</p>
    </div>
    
    </div>
    
    <div class="box">
    <div id="shw_desc" style="background-color: #dfdfdf;font-size: 14px;float: left;padding: 4px 12px;width: 90.3%;color: #666;" class="meclick nt_selected">
      <span>Description 2</span><span id="shw_desc_icon" style="float:right;" class="glyphicon glyphicon-chevron-right"><img class="block-hider-hide" alt="Hide Administration block" src="image" tabindex="0" title="Hide Administration block"></span>
    </div>
    <div class="desc" style="display:none;border: 1px solid #eee;padding: 6px 12px;color: #999;font-size: 13px;width:90%;float: left;">
      <p>Some Description 2</p>
    </div>
    </div>

相关问题
最新问题