Question

我有hide / show标签的不同分区。我需要的是：如果一个部门被打开，其他部门应该被隐藏。此代码中使用的jQuery： jquery / 1.8.2 / jquery.min.js ，完整代码如下：

<script type="text/javascript">
jQuery(document).ready(function($) {
    $('.bhlink').on('click', function () {
        $(this).text(function (i, txt) {
            return txt.indexOf('MORE') != -1 ? 'HIDE' : 'MORE';
        }).closest('.nn').next('.bhinfo').slideToggle();
    });
});
</script>

CSS代码：

.bhinfo {  display: none; }
.nn { margin: 5px 0 5px 0; font-weight: bold;}

正文中的HTML：

David jhon<br /><div class="nn">
<a class="bhlink" href="javascript:void(0)">MORE</a></div>
<div class="bhinfo">Mobile: 99934 59234</div>  

Peter mick <br /><div class="nn">
<a class="bhlink" href="javascript:void(0)">MORE</a></div>
<div class="bhinfo">Mobile: 88934 59234</div>

Sleek boon <br /><div class="nn">
<a class="bhlink" href="javascript:void(0)">MORE</a></div>
<div class="bhinfo">Mobile: 76534 59234</div>

请帮助我，纠正代码吗？

Answer 1

$(this)将包含单个元素，不需要将函数传递给text，因为您知道它只会循环遍历一个元素。

据我所知，你实际上并没有做任何显示或隐藏任何事情的努力。

我假设点击HIDE链接应该隐藏其关联的div。所以（见代码注释）：

＆＃13;

$(function() {
    $('.bhlink').on('click', function () {
        // Get jQuery wrappers for the link that was clicked,
        // and the .bhinfo connected to it
        var $this = $(this),
            $bhinfo = $this.closest(".nn").next(".bhinfo");

        // Are we showing or hiding?
        if ($this.text() == 'MORE') {
            // Showing, hide all that are visible and change
            // their links' associated text to 'MORE'
            $(".bhinfo:visible")
              .slideUp()
              .prev(".nn").find(".bhlink").text('MORE');
            // Show our div and change our text
            $bhinfo.slideDown();
            $this.text('HIDE');
        } else {
            // Hiding -- just slide our div up and change our text
            $bhinfo.slideUp();
            $this.text('MORE');
        }
    });
});

＆＃13;

.bhinfo {  display: none; }
.nn { margin: 5px 0 5px 0; font-weight: bold;}

＆＃13;

David jhon<br /><div class="nn">
<a class="bhlink" href="javascript:void(0)">MORE</a></div>
<div class="bhinfo">Mobile: 99934 59234</div>  

Peter mick <br /><div class="nn">
<a class="bhlink" href="javascript:void(0)">MORE</a></div>
<div class="bhinfo">Mobile: 88934 59234</div>

Sleek boon <br /><div class="nn">
<a class="bhlink" href="javascript:void(0)">MORE</a></div>
<div class="bhinfo">Mobile: 76534 59234</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

Answer 2

使用 siblings() 获取其他div

jQuery(document).ready(function($) {
  $('.bhlink').on('click', function() {
    $(this).text(function(i, txt) {
        return txt.indexOf('MORE') != -1 ? 'HIDE' : 'MORE';
      }).closest('.nn')
      .next('.bhinfo')
      .slideToggle()
      //For getting sibling div to hide them
      .siblings('.bhinfo').slideUp()
      //For Changing their text from HIDE to MORE
      .prev('.nn').find('a').text('MORE');
  });
});

.bhinfo {
  display: none;
}
.nn {
  margin: 5px 0 5px 0;
  font-weight: bold;
}
HTML in body:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
David jhon
<br />
<div class="nn">
  <a class="bhlink" href="javascript:void(0)">MORE</a>
</div>
<div class="bhinfo">Mobile: 99934 59234</div>

Peter mick
<br />
<div class="nn">
  <a class="bhlink" href="javascript:void(0)">MORE</a>
</div>
<div class="bhinfo">Mobile: 88934 59234</div>

Sleek boon
<br />
<div class="nn">
  <a class="bhlink" href="javascript:void(0)">MORE</a>
</div>
<div class="bhinfo">Mobile: 76534 59234</div>

Answer 3

使用下面的代码。 $('.bhinfo').slideUp();和$('.bhlink').text('MORE');

slideUp()适用于所有bhinfo元素。

$('.bhlink').text('MORE');将所有MORE元素中的文字更改为bhlink。

检查DEMO

 jQuery(document).ready(function($) {
   $('.bhlink').on('click', function () {
    $('.bhinfo').slideUp();   // add this code
    $('.bhlink').text('MORE');  // add this code
    $(this).text(function (i, txt) {
        return txt.indexOf('MORE') != -1 ? 'HIDE' : 'MORE';
    }).closest('.nn').next('.bhinfo').slideToggle();
  });
});

Answer 4

<script type="text/javascript">
jQuery(document).ready(function($) {
    $('.bhlink').on('click', function () {
        $(this).parent('.nn').find('.bhinfo').slideToggle();
        });
    });
});
</script>

希望这个脚本有所帮助。请尝试告诉我。

分区隐藏在jquery中不起作用

4 个答案: