隐藏/显示 div 切换答案

【问题标题】：Hide / show div toggle隐藏/显示 div 切换
【发布时间】：2012-03-23 21:26:27
【问题描述】：

我用基本和高级搜索 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 显示为默认值，则链接将显示显示高级。当显示高级时，锚链接应切换为隐藏高级

我需要如何编辑我的 jQuery 和标记。

【问题讨论】：

标签： jquery show-hide

【解决方案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.

【讨论】：

我喜欢这个。但它不会在 IE9 中扩展
奇怪，这里没有火箭科学。有任何错误信息吗？我只有IE8所以无法查看。
好吧，它可以工作，但是如果我从结果页面返回搜索表单页面并且我的高级 div 是打开的（基于用户使用了高级搜索输入文件）链接仍然显示显示高级甚至认为 div 已经打开，然后整个事情都搞砸了
我已经在我的代码中添加了额外的 jQuery，所以你现在可以看到那些复杂的东西。我喜欢你的解决方案，而且效果很好。但是我们需要添加什么，以便它可以识别如果 div 在页面加载时打开，那么链接应该正确显示？
嗯，这不是我想要的。正如我所说，我需要有该代码（ $('#Adv').show(); ）所以有 if 语句，而用户完成了任何高级输入字段，然后 div 应该显示。目前 div 显示总是隐藏的，这不是我需要的。

【解决方案2】：

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

建立一个链接<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 手风琴更适合这个，尤其是当您有更多要显示/隐藏的容器时。

【讨论】：

【解决方案3】：

你可以的

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/

【讨论】：

【解决方案4】：

在下面找到。

<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();

           }

         }

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

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/

【讨论】：

这正是我想要的。我喜欢它，但目前不切换
不知道为什么它在我的页面上不起作用。试图查看任何可能存在冲突的现有脚本。我真的很喜欢你的解决方案
在加载页面和单击链接时查看您的 javascript 控制台。否则检查函数是否被实际调用（使用一些console.log()），如果元素，你试图切换存在