個別のタグで 4 つのメイン トピックを定義しました。これらのそれぞれにもいくつかのサブトピックがあり、その一部はページの読み込み時にすでに表示されています (これらは別のテーブルとして定義されています)。残りは [詳細] をクリックすると表示されます...(これらも別のテーブルで定義されています)。今私が欲しいのは、1 つのメイン トピックの下の「詳細...」部分をクリックすると、他のすべてのメイン トピックのすべてのサブトピック (「詳細」とともに) が非表示になり、他の 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 を持つ詳細の下の残りのトピックが表示されます
このコードの問題は、コードの 4 番目の部分、つまり 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>