Question

我有一个jQuery切换链接，看起来像一个按钮。当用户按下它时，它会切换并显示下面的div。

现在我想在链接旁边添加一些类似“更多”的文字，其行为方式与按下链接的方式相同 - 按下一次显示内容，再次按下时隐藏它。同时我想保留第一个链接的原始功能。

我尝试了几种可能性但无法使其正常工作，任何建议都将受到赞赏。

这是功能：

$(document).ready(function(){

   $(".slidingDiv").hide();
   $(".show_hide_search").show();

   $('.show_hide_search').on('click', function(e){
       e.preventDefault();

       var self    = this,
           sliding = $(this).closest('div').next('.slidingDiv').slideToggle(function(){
               $(self).text(function(_,txt) {
                    return txt == "–" ? "+" : "–";
               });
           });
    });
});

这是HTML：

<div>
    <a href="#" class="show_hide_search" id="plus">+</a>    
    <div style="margin-left:30px;" class="show_hide_search2">More</div>
</div>

这是一个完整的测试：

$(document).ready(function(){

   $(".slidingDiv").hide();
   $(".show_hide_search").show();

   $('.show_hide_search').on('click', function(e){
       e.preventDefault();

       var self    = this,
           sliding = $(this).closest('div').next('.slidingDiv').slideToggle(function(){
               $(self).text(function(_,txt) {
                    return txt == "–" ? "+" : "–";
               });
           });
    });
});

.show_hide_search {
  font: bold 14px Arial;
  text-decoration: none;
  background-color: orange;
  color: #FFFFFF;
  padding: 2px 6px 1px 6px;  
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;	       
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
        <a href="#" class="show_hide_search" id="plus">+</a>    
        <div style="margin-left:30px;" class="show_hide_search2">More</div>
    </div>  

    <div class="slidingDiv" style="display: block;">
          <h2>Content One</h2>
    </div>

    <div>
        <a href="#" class="show_hide_search" id="plus">+</a>
        <div style=" margin-left:30px;" class="show_hide_search2">More</div>
    </div>  

    <div class="slidingDiv" style="display: block;">
          <h2>Content Two</h2>
    </div>

Answer 1

试试这个：

DEMO

$(document).ready(function(){

   $(".slidingDiv").hide();
   $(".show_hide_search").show();

   $('.show_hide_search').on('click', function(e){
       e.preventDefault();

       var self    = this,
           sliding = $(this).closest('div').next('.slidingDiv').slideToggle(function(){
               $(self).text(function(_,txt) {
                    return txt == "–" ? "+" : "–";
               });
           });
    });


    $('.show_hide_search2').on('click', function(e){
        console.log(123)
       e.preventDefault();

       var self    = this,
           sliding = $(this).closest('.slideButtons').nextAll('.slidingDiv').first().slideToggle();
    });

});

HTML：

<div class="slideButtons">
    <a href="#" class="show_hide_search" id="plus">+</a>    
    <div style="margin-left:30px;" class="show_hide_search2">More</div>
</div>  

<div class="slidingDiv" style="display: block;">
      <h2>Content One</h2>
</div>

<div class="slideButtons">
    <a href="#" class="show_hide_search" id="plus">+</a>
    <div style=" margin-left:30px;" class="show_hide_search2">More</div>
</div>  

<div class="slidingDiv" style="display: block;">
      <h2>Content Two</h2>
</div>

Answer 2

只需将onclick侦听器添加到容器中即可。

$(document).ready(function(){

   $(".slidingDiv").hide();
   $(".show_hide_search").show();

   $('.show_hide_toggle').on('click', function(e){
       e.preventDefault();

       var self    = this,
           sliding = $(this).closest('div').next('.slidingDiv').slideToggle(function(){
               $($(self).children()[0]).text(function(_,txt) {
                    return txt == "–" ? "+" : "–";
               });
           });
    });
});

请在此处查看：JSFiddle

Answer 3

使用课程show_hide_search2并强制.prev()转为click()：

$('.show_hide_search2').click(function(){
    $(this).prev().click();
});

$(document).ready(function(){

   $(".slidingDiv").hide();
   $(".show_hide_search").show();

   $('.show_hide_search').on('click', function(e){
       e.preventDefault();

       var self    = this,
           sliding = $(this).closest('div').next('.slidingDiv').slideToggle(function(){
               $(self).text(function(_,txt) {
                    return txt == "–" ? "+" : "–";
               });
           });
    });
  $('.show_hide_search2').click(function(){
    $(this).prev().click();
  });
});

.show_hide_search {
  font: bold 14px Arial;
  text-decoration: none;
  background-color: orange;
  color: #FFFFFF;
  padding: 2px 6px 1px 6px;  
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;	       
}
.show_hide_search2 {
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
        <a href="#" class="show_hide_search" id="plus">+</a>    
        <div style="margin-left:30px;" class="show_hide_search2">More</div>
    </div>  

    <div class="slidingDiv" style="display: block;">
          <h2>Content One</h2>
    </div>

    <div>
        <a href="#" class="show_hide_search" id="plus">+</a>
        <div style=" margin-left:30px;" class="show_hide_search2">More</div>
    </div>  

    <div class="slidingDiv" style="display: block;">
          <h2>Content Two</h2>
    </div>

Answer 4

尝试

HTML

<!-- add `show_hide_search` class to `div` containing "More" text 
     remove `style` attribute , add style at css
-->
<div> <a href="#" class="show_hide_search" id="plus">+</a> 
<div class="show_hide_search show_hide_search2">More</div>
</div>
<div class="slidingDiv" style="display: block;">
     <h2>Content One</h2>

</div>
<div> <a href="#" class="show_hide_search" id="plus">+</a>

    <div class="show_hide_search show_hide_search2">More</div>
</div>
<div class="slidingDiv" style="display: block;">
     <h2>Content Two</h2>

</div>

CSS

/* add `:not(div)` to negate styles for div containing "More" text , 
   `margin-left` style for div containing "More" 
*/
.show_hide_search:not(div) {
  font: bold 14px Arial;
  text-decoration: none;
  background-color: orange;
  color: #FFFFFF;
  padding: 2px 6px 1px 6px;  
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;      
}
div.show_hide_search {
  margin-left : 30px;
}

JS

$(document).ready(function () {

    $(".slidingDiv").hide();
    $(".show_hide_search").show();

    $('.show_hide_search').on('click', function (e) {
        e.preventDefault();

        var self = this,
            sliding = $(this)
            // add `:not(.show_hide_search)` to negate `div` containing "More"
           .closest('div:not(.show_hide_search)')
           .next('.slidingDiv')
           .slideToggle(function () {
                // add `.not(div)` to negate `div` containing "More"
                $(self).not("div").text(function (_, txt) {
                    return txt == "–" ? "+" : "–";
                });
            });
    });
});

jsfiddle http://jsfiddle.net/guest271314/eBfxB/9/

＆＃13;

$(document).ready(function () {

    $(".slidingDiv").hide();
    $(".show_hide_search").show();

    $('.show_hide_search').on('click', function (e) {
        e.preventDefault();

        var self = this,
            sliding = $(this).closest('div:not(.show_hide_search)').next('.slidingDiv').slideToggle(function () {
                $(self).not("div").text(function (_, txt) {
                    return txt == "–" ? "+" : "–";
                });
            });
    });
});

＆＃13;

.show_hide_search:not(div) {
    font: bold 14px Arial;
    text-decoration: none;
    background-color: orange;
    color: #FFFFFF;
    padding: 2px 6px 1px 6px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}

div.show_hide_search {
    margin-left : 30px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div> <a href="#" class="show_hide_search" id="plus">+</a> 
    <div class="show_hide_search show_hide_search2">More</div>
</div>
<div class="slidingDiv" style="display: block;">
     <h2>Content One</h2>

</div>
<div> <a href="#" class="show_hide_search" id="plus">+</a>

    <div class="show_hide_search show_hide_search2">More</div>
</div>
<div class="slidingDiv" style="display: block;">
     <h2>Content Two</h2>

</div>

＆＃13;

如何添加一个文本链接到这个jQuery切换

4 个答案:

DEMO