Question

我有以下标记与基本和高级搜索div。

<div class="form">
     <form>
         <input type="text" name="first_name">
         <input type="text" name="last_name">

       <div id="Basic" class="slide">
         <input type="text" name="location"> 
       </div>

       <a onclick="ShowDiv('Adv');">+ show advanced fields</a>

      <div id="Adv" class="slide hidden">
         <input type="text" name="first_name2">
         <input type="text" name="last_name2">
         <input type="text" name="street">
         <input type="text" name="town">
         <input type="text" name="country">
       </div>
     </form>

     <a onclick="ShowDiv('Basic');">- hide advanced fields</a> 
    </div>

使用以下脚本

实现切换

 function HideDiv() {
         $('.slide').hide();
     }
     function ShowDiv(ctrl) {
         HideDiv();
         $('#' + ctrl).show();
     }
     ShowDiv('Basic');

如果用户从结果页面返回页面，假设他最初从搜索表单中填写了任何输入字段，那么我还有以下JQuery来显示adv div

//show adv div based on input value data 
$(function(){
    if($("#Adv input[value!='']").length)
        $('#Adv').show(); // if this is the element you want to show.
 });

我需要消除使用这两个链接的需要。我需要根据状态只有一个链接。因此，如果div basic显示为默认值，则链接将显示show advanced。显示高级时，锚链接应切换为隐藏高级

我如何编辑我的jQuery并标记。

Answer 1

$(function(){
    $(".toggler").click(function(e) {
        e.preventDefault();
        $(this).find("span").toggle();
        $(".togglee").slideToggle();
    });

    //show adv div based on input value data 
    if($("#Adv input[value!='']").length) {
        $('.toggler').click(); // if this is the element you want to show.
    }

});

HTML：

<html>
    <body>
        <div class="form">
            <form>
                <input type="text" name="first_name">
                <input type="text" name="last_name">

                <div class="Basic togglee" class="slide">
                    <input type="text" name="location">
                </div>

                <div id="Adv" class="slide hidden togglee">
                    <input type="text" name="first_name2">
                    <input type="text" name="last_name2">
                    <input type="text" name="street">
                    <input type="text" name="town">
                    <input type="text" name="country">
                </div>
            </form>

            <a class="toggle-link toggler">
                <span>+ show advanced fields</span>
                <span class="hidden">- hide advanced fields</span>
            </a>

        </div>
    </body>
</html>

jsFiddle示例here。

Answer 2

HTML

<a class="toggle-link" href="#Adv" >toggle advanced fields</a>

JS

$('.toggle-link').on('click.toggle', function(evt) {
   var tgt = $($(this).attr('href'));  /* tgt = $("#Adv") */
   evt.preventDefault();

   if (tgt.length) { /* if $("#Adv") exists */
      $(this).toggleClass(".expanded"); /* add or remove this class for the link */
      tgt.toggleClass(".hidden"); /* add or remove this class in the target element */
   }
});

CSS

.toggle-link:before { content: "+"; padding-right: 1em; }
.toggle-link.expanded:before { content: "-"; }

在此示例中，有关要隐藏/显示的元素的信息与href属性一起传递，并且事件处理程序不是内联的，因此您可以避免多次调用相同的函数混合javascript和标记一起。

参见示例小提琴：http://jsfiddle.net/SnKHg/

Answer 3

这个功能可以做得更好，但这是一种方法。

建立链接<a href="#" class="show adv">Click</a>。

jQuery函数切换类，从而切换功能。

$('a.show').click(function(e) {
    e.preventDefault();
    if($(this).hasClass('basic'))
    {
        ('#adv').hide();
        ('#basic').show();
        $(this).addClass('adv');
        $(this).removeClass('basic');
    }
    else if($(this).hasClass('adv'))
    {
        ('#basic').hide();
        ('#adv').show();
        $(this).addClass('basic');
        $(this).removeClass('adv');
    }           
});

但是jQuery UI accordeon对此更好，特别是当你有更多想要显示/隐藏的容器时。

Answer 4

你可以做到

JS

$("a.toggle").click(function() {
    $(this).closest('div.form').find("#Adv").toggle();
    $(this).toggleClass("hide");
    if ($(this).hasClass("hide")) {
        $(this).text("hide advanced fields");
    } else {
        $(this).text("show advanced fields");
    }


});

HTML

<div class="form">
 <form>
     <input type="text" name="first_name">
     <input type="text" name="last_name">

   <div class="Basic" class="slide">
     <input type="text" name="location">
   </div>

  <div id="Adv" class="slide hidden">
     <input type="text" name="first_name2">
     <input type="text" name="last_name2">
     <input type="text" name="street">
     <input type="text" name="town">
     <input type="text" name="country" value="gh">
   </div>
 </form>

 <a class='toggle'>show advanced fields</a>
</div>

在这里摆弄http://jsfiddle.net/c27dW/

Answer 5

在下面找到。

<div class="form">
     <form>
         <input type="text" name="first_name">
         <input type="text" name="last_name">

       <div class="Basic" class="slide">
         <input type="text" name="location"> 
       </div>

       <a class="toggle-link" onclick="ShowHideDiv();" id='bttn'>+ show advanced fields</a>

      <div id="Adv" class="slide hidden">
         <input type="text" name="first_name2">
         <input type="text" name="last_name2">
         <input type="text" name="street">
         <input type="text" name="town">
         <input type="text" name="country">
       </div>
     </form>


    </div>

我也修改了javascript部分。

  function Hide() {
             $('.slide').hide();
         }

    function Show() {

      $('.slide').show();
    }
         function ShowHideDiv() {

           var str = $("#bttn").text();
           if(str === '+ show advanced fields'){

             $("#bttn").text('- hide advanced fields');
             Show();

           }
           else {
              $("#bttn").text('+ show advanced fields');
             Hide();

           }

         }

Answer 6

除了其他答案，可能如果你想要一些动画那么你应该看看这个http://jqueryui.com/demos/toggle/#option-options

隐藏/显示div切换

6 个答案: