我在单独的标签中定义了4个主要主题。这些中的每一个都有一些子主题，其中一些已经在页面加载时显示（这些被定义为单独的表格）......其余的可以在点击更多时看到......（这些再次在单独的表中定义）。现在我想要的是当我点击一个主题下的“更多...”部分时，所有其他主要主题的所有子主题（以及“更多”）应该被隐藏，只显示其他3个主要主题，因为它是。这是我写的代码：
<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，点击后会显示其他主题，其中的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>
答案 0 :(得分：0)
试图改进代码。
$(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()。