簡體   English   中英

hide(),show()在jQuery中無法正常工作

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

我在單獨的標簽中定義了4個主要主題。 每一個都具有一些子主題,頁面加載時已經顯示了其中的一些子主題(這些主題定義為單獨的表格)。點擊其他子主題時可以看到其他子主題(這些主題再次在單獨的表格中定義)。 現在我想要的是,當我單擊一個主要主題下的“更多...”部分時,所有其他主要主題的所有子主題(以及“更多”)都應隱藏,僅顯示其他三個主要主題。 這是我寫的代碼:

    <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"是我的4個主要主題的ID。 "#marketing_more", "#designing_more", "#planning_more", "#technology_more"分別是4個“更多”鏈接的ID,單擊這些鏈接可在more下顯示其余主題,其ID以“ panel”結尾

現在,此代碼的問題是,在代碼的第四部分(即ID為"#technology_more"hide()show()函數可以正常工作,但不適用於任何其他情況。 請幫助。 我也把我的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>

試圖改善代碼。

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

請注意,您應該在面板上添加一個類,因此您可以使用上面的show() / hide()

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM