堆栈内存溢出
  简体   繁体   English

hide（），show（）在jQuery中无法正常工作

[英]hide() , show() not working properly in jquery

 原文  2013-01-03 10:54:11  1   1    javascript/ jquery/ html

问题描述

I have defined 4 main topics in seperate tags. 我在单独的标签中定义了4个主要主题。 Each of these again have some subtopics, some of which are already shown when page loads(these are defined as seperate tables)..and the rest can be seen when clicked on more...(these are again defined in seperate tables). 每一个都具有一些子主题，页面加载时已经显示了其中的一些子主题（这些主题定义为单独的表格）。点击其他子主题时可以看到其他子主题（这些主题再次在单独的表格中定义）。 Now what I want is when I click on the "more..." part under one main topic, all subtopics(along with "more") from all other main topics should get hidden, only showing the other 3 main topics as it is. 现在我想要的是，当我单击一个主要主题下的“更多...”部分时，所有其他主要主题的所有子主题（以及“更多”）都应隐藏，仅显示其他三个主要主题。 Here is the code I wrote: 这是我写的代码： 

    <script> 
    $(document).ready(function() {
    $(document).on('click',function(e) {
         var $panel = $("#planning_panel");
         if ($(e.target).closest("#planning_more")[0]) {
                     $panel.slideToggle('slow');
                     $("#design").hide();
                     $("#market").hide();
                     $("#techno").hide();
                     $("#designing_more").hide();
                     $("#marketing_more").hide();
             $("#technology_more").hide();
                     e.preventDefault();
         } else {
             $panel.slideUp('slow');
             $("#market").show();
             $("#design").show();
             $("#techno").show();
             $("#marketing_more").show();
             $("#designing_more").show();
             $("#technology_more").show();
         }
         var $panel1 = $("#designing_panel");
         if ($(e.target).closest("#designing_more")[0]) {
             $panel1.slideToggle('slow');
             $("#market").hide();
             $("#plan").hide();
             $("#techno").hide();
             $("#marketing_more").hide();
             $("#planning_more").hide();
             $("#technology_more").hide();
                     e.preventDefault();
         } else {
             $panel1.slideUp('slow');
             $("#market").show();
             $("#plan").show();
             $("#techno").show();
             $("#marketing_more").show();
             $("#planning_more").show();
             $("#technology_more").show();
         }
         var $panel2 = $("#marketing_panel");
         if ($(e.target).closest("#marketing_more")[0]) {
             $panel2.slideToggle('slow');
             $("#design").hide();
             $("#plan").hide();
             $("#techno").hide();
             $("#designing_more").hide();
             $("#planning_more").hide();
             $("#technology_more").hide();
             e.preventDefault();
         } else {
             $panel2.slideUp('slow');
             $("#design").show();
             $("#plan").show();
             $("#techno").show();
             $("#designing_more").show();
             $("#planning_more").show();
             $("#technology_more").show();
         }
         var $panel3 = $("#technology_panel");
         if ($(e.target).closest("#technology_more")[0]) {
             $panel3.slideToggle('slow');
             $("#design").hide();
             $("#plan").hide();
             $("#market").hide();
             $("#designing_more").hide();
             $("#planning_more").hide();
             $("#marketing_more").hide();
             e.preventDefault();
         } else {
             $panel3.slideUp('slow');
             $("#design").show();
             $("#plan").show();
             $("#market").show();
             $("#designing_more").show();
             $("#planning_more").show();
             $("#marketing_more").show();
         }
     });
    });
    </script>

"#plan", "#design", "#market", "#techno" are the ids for my 4 main topics. "#plan", "#design", "#market", "#techno"是我的4个主要主题的ID。 "#marketing_more", "#designing_more", "#planning_more", "#technology_more" are the ids for the 4 respective "more" links which when clicked shows rest of the topics under more with ids ending with "panel" "#marketing_more", "#designing_more", "#planning_more", "#technology_more"分别是4个“更多”链接的ID，单击这些链接可在more下显示其余主题，其ID以“ panel”结尾

Now the problem with this code is, in the fourth part of the code ie with id "#technology_more" , hide() and show() functions are working fine, but its not working for any other cases. 现在，此代码的问题是，在代码的第四部分（即ID为"#technology_more" ， hide()和show()函数可以正常工作，但不适用于任何其他情况。 Kindly help. 请帮助。 I am putting my html code as well : 我也把我的html代码： 

    <td width="213" valign="top" height="602" align="left">
    <table class="style46"> 
          <tr><td><font color="#0000FF" face="Georgia, Times New Roman, Times, serif"       size="4" >Planning</font></td></tr>
          <tr id="plan"><td><table>
          <tr><td class="style47"><a href="Planning/web-ecommerce--where-to-begin.html">Web Ecommerce</a></td></tr>
          <tr><td class="style47"><a href="Planning/introduction-to-ecommerce.html">Introduction To Ecommerce</a></td></tr>
          <tr><td class="style47"><a href="Planning/web-site-analysis----a-study-in-damag.html">Web Site Analysis</a></td></tr>
          <tr><td class="style47"><a href="Planning/set-up-your-own-blog-free.html">Setting Up Blog</a></td></tr>
          </table></td></tr>
          <tr id="planning_more"><td align="right"><font size="2px" color="#FF3300">More...</font></td></tr>
          <tr id="planning_panel"><td>
          <table>
          <tr><td class="style47"><a href="Planning/what-is-electronic-data-interchange.html">Electronic-Data-Interchange</a></td></tr>
          <tr><td class="style47"><a href="Planning/streamline-your-website-pages.html">Streamline Web Pages</a></td></tr>
          <tr><td class="style47"><a href="Planning/online-backup--the-simple-value.html">Online Backup</a></td></tr>
          <tr><td class="style47"><a href="Planning/building-ecommerce-web-sites--where-d.html">Build eCommerce Sites</a></td></tr>
          <tr><td class="style47"><a href="Planning/banned-by-google-and-back-again..html">Banned by Google</a></td></tr>
          <tr><td class="style47"><a href="Planning/are-drop-ship-directories-really-wort.html">Know Drop Ship Directories</a></td></tr>
          </table>
          </td></tr>
          <tr><td><font color="#0000FF" face="Georgia, Times New Roman, Times, serif" size="4" >Designing & Hosting</font></td></tr>
          <tr id="design"><td><table>
          <tr><td class="style47"><a href="Designing-Hosting/ecommerce-hosting-for-your-online-bus.html">Hosting for Business</a></td>      </tr>
          <tr><td class="style47"><a href="Designing-Hosting/web-hosting-basics.html">Web Hosting Basics</a></td></tr>
          <tr><td class="style47"><a href="Designing-Hosting/web-hosting-strategy-for-managing-mul.html">Multiple Websites Hosting</a>      </td></tr>
          <tr><td class="style47"><a href="Designing-Hosting/domain-name-scams--have-you-fallen-fo.html">Domain Name Scams</a></td></tr>
          </table></td></tr>
          <tr id="designing_more"><td align="right"><font size="2px" color="#FF3300">More...</font></td></tr>

          <tr id="designing_panel"><td>
          <table>
          <tr><td class="style47"><a href="Designing-Hosting/5-minute-guide-to-video-editing-for-b.html">Video Editing Guide
          </a></td></tr>
          <tr><td class="style47"><a href="Designing-Hosting/dedicated-domain-hosting-with-windows.html">Dedicated domain hosting
          </a></td></tr>
          <tr><td class="style47"><a href="Designing-Hosting/ecommerce-hosting-considerations.html">Ecommerce Hosting Basics
          </a></td></tr>
          <tr><td class="style47"><a href="Designing-Hosting/ecommerce-hosting---how-to-choose-a-m.html">Choose A Merchant Account
          </a></td></tr>
          <tr><td class="style47"><a href="Designing-Hosting/ecommerce-web-site-building--where-do.html">Web Site Building
          </a></td></tr>
          <tr><td class="style47"><a href="Designing-Hosting/fast-web-design-for-the-skint-webmaster.html">Web Design For Webmaster
          </a></td></tr>
          <tr><td class="style47"><a href="Designing-Hosting/finding-the-right-web-host.html">Right Web Host
          </a></td></tr>
          <tr><td class="style47"><a href="Designing-Hosting/how-not-to-get-web-design-work.html">Right Web Designers
          </a></td></tr>
          <tr><td class="style47"><a href="Designing-Hosting/online-powerpoint-presentation-c-con.html">Online PPT Presentation
          </a></td></tr>
          <tr><td class="style47"><a href="Designing-Hosting/powerpoint-to-flash--a-new-trend-in.html">PowerPoint to Flash
          </a></td></tr>
          </table>
          </td></tr>



          <tr><td><font color="#0000FF" face="Georgia, Times New Roman, Times, serif" size="4" >Marketing</font></td></tr>
          <tr id="market"><td><table>
          <tr><td class="style47"><a href="Marketing/the-real-secret-to-understanding-web.html">Web Statistics</a></td></tr>
          <tr><td class="style47"><a href="Marketing/how-to-generate-web-site-traffic-for.html">Web Site Traffic For Free</a></td></tr>
          <tr><td class="style47"><a href="Marketing/create-worry-free-sales-with-secure-s.html">Secure Shopping Cart</a></td></tr>
          <tr><td class="style47"><a href="Marketing/7--steps-of--mega-adsense-earners.html">Adsense Earning</a></td></tr>
          </table></td></tr>
          <tr id="marketing_more"><td align="right"><font size="2px" color="#FF3300">More...</font></td></tr>

          <tr id="marketing_panel"><td>
          <table>
          <tr><td class="style47"><a href="Marketing/affiliates-need-to-read-their-newspap.html">Suggestion for Affiliates
          </a></td></tr>
          <tr><td class="style47"><a href="Marketing/manufacturing-outsourcing--microsoft.html">Manufacturing Outsourcing
          </a></td></tr>
          <tr><td class="style47"><a href="Marketing/no-customer-left-behind.html">Customer Focused Site
          </a></td></tr>
          <tr><td class="style47"><a href="Marketing/the-e-in-ebusiness-does-not-mean-ex.html">Business vs e-Business
          </a></td></tr>
          <tr><td class="style47"><a href="Marketing/top-10-search-engine-positioning-mist.html">SE Positioning Mistakes
          </a></td></tr>
          <tr><td class="style47"><a href="Marketing/use-your-hobby-to-launch-a-successful.html">Website on hobby
          </a></td></tr>
          <tr><td class="style47"><a href="Marketing/when-it-comes-to-ebay--don-t-follow-t.html">Suggestions for eBay
          </a></td></tr>
          </table>
          </td></tr>


          <tr><td><font color="#0000FF" face="Georgia, Times New Roman, Times, serif" size="4" >Technology</font></td></tr>
          <tr id="techno"><td><table>
          <tr><td class="style47"><a href="Technology/the-best-simple-software-for-the-busy.html">Software For Webmaster</a></td></tr>
          <tr><td class="style47"><a href="Technology/virtual-hosting-vs-dedicated-hosting.html">Virtual vs Dedicated Hosting
          </a></td></tr>
          <tr><td class="style47"><a href="Technology/network-monitoring-for-serious-ecommerce.html">Network Monitoring</a></td></tr>
          <tr><td class="style47"><a href="Technology/anti-spam-at-the-enterprise-level.html">Anti-spam at Enterprises</a></td></tr>
          </table></td></tr>
          <tr id="technology_more"><td align="right"><font size="2px" color="#FF3300">More...</font></td></tr>

          <tr id="technology_panel"><td>
          <table>
          <tr><td class="style47"><a href="Technology/causes-of-erp-failures.html">ERP Failures
          </a></td></tr>
          <tr><td class="style47"><a href="Technology/crm-and-customer-life-cycle.html">CRM basics
          </a></td></tr>
          <tr><td class="style47"><a href="Technology/finding-the-right-log-analyzer.html">Right Log Analyzer
          </a></td></tr>
          <tr><td class="style47"><a href="Technology/how-i-use-email-automatic-responders.html">Email Automatic Responders
          </a></td></tr>
          <tr><td class="style47"><a href="Technology/implementing-sap-business-one---custo.html">SAP Business One
          </a></td></tr>
          <tr><td class="style47"><a href="Technology/is-your-website-credit-card-friendly.html">Credit Card Friendly Site
          </a></td></tr>
          <tr><td class="style47"><a href="Technology/microsoft-dynamics-gp-customization-t.html">GP customization tools
          </a></td></tr>
          <tr><td class="style47"><a href="Technology/microsoft-dynamics-gp--renovated-mic.html">Microsoft Dynamics GP
          </a></td></tr>
          <tr><td class="style47"><a href="Technology/microsoft-great-plains-customization.html">GP tools Basics
          </a></td></tr>
          <tr><td class="style47"><a href="Technology/website-buying-guide-checklist.html">Website Buying
          </a></td></tr>
          <tr><td class="style47"><a href="Technology/xhtml---kicking-and-screaming-into-th.html">Future: XHTML
          </a></td></tr>
          </table>
          </td></tr>

          </table></td>

1 个解决方案

解决方案1
 0  2013-01-03 11:34:32

Tried to improve the code. 试图改善代码。 

$(document).ready(function() {
  $(document).on('click',function(e) {
     var $panel0 = $("#planning_panel"),
         $panel1 = $("#designing_panel"),
         $panel2 = $("#marketing_panel"),
         $panel3 = $("#technology_panel");

     var hidePanels = false;

     if ($(e.target).closest("#planning_more")[0]) {
         $panel0.slideToggle('slow');
         hidePanels = true;
     } else {
         $panel0.slideUp('slow');
     }

     if ($(e.target).closest("#designing_more")[0]) {
         $panel1.slideToggle('slow');
         hidePanels = true;
     } else {
         $panel1.slideUp('slow');
     }

     if ($(e.target).closest("#marketing_more")[0]) {
         $panel2.slideToggle('slow');
         hidePanels = true;
     } else {
         $panel2.slideUp('slow');
     }

     if ($(e.target).closest("#technology_more")[0]) {
         $panel3.slideToggle('slow');
         hidePanels = true;
     } else {
         $panel3.slideUp('slow');
     }

     if( hidePanels ) {
        $(".byClass").hide(); // Give them a class as suggested in the comments
        event.preventDefault();
     } else
        $(".byClass").show();
     }
  });
});

Note that you should add a class to the panels, so u can use the show() / hide() above. 请注意，您应该在面板上添加一个类，因此您可以使用上面的show() / hide() 。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Jquery 显示和隐藏无法正常工作 - Jquery Show and hide is not working properly jQuery的显示隐藏无法正常工作 - jquery show hide not working properly jQuery隐藏显示无法正常工作 - Jquery hide show not working properly 隐藏/显示不适用于jQuery - hide/show not working properly with jquery 使用jQuery和AJAX显示/隐藏div无法正常工作 - Show/hide div with jQuery and AJAX not working properly jQuery显示/隐藏字段第一次无法正常工作 - JQuery show/hide field not working properly the first time 给定慢速参数时，jquery隐藏和显示方法无法正常工作 - jquery hide and show method not working properly when given the slow parameter jQuery-隐藏显示无法在Chrome中正常运行（只能运行一次） - jQuery - Hide show not working properly in Chrome (Works only once) jQuery显示隐藏下拉列表中的div更新时无法正常工作 - Jquery Show Hide div on dropdown change not working properly while Updating jQuery显示/隐藏不起作用 - jQuery show/hide is not working
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM