简体   繁体   中英

hide() , show() not working properly in jquery

I have defined 4 main topics in seperate tags. 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. "#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"

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. Kindly help. I am putting my html code as well :

    <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>

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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM