Question

我正在使用此代码根据用户选择的链接在我的页面上显示多个表单：

<ul class="nav">
   <li><a href="#" onclick="$('#more_info').toggle(); return false;">
      More Information</a>
   </li>
   <li><a href="#" onclick="$('#road_test').toggle(); return false;">
      Book a Road Test</a>
   </li>
   <li><a href="#" onclick="$('#quote').toggle(); return false;">
      Request a Quote</a>
   </li>
   <li><a href="#" onclick="$('#offer').toggle(); return false;">
      Make an Offer</a>
   </li>
   <li><a href="#" onclick="$('#contact').toggle(); return false;">
      General Contact</a>
   </li>
</ul>

代码工作正常，我遇到的唯一问题是，如果我选择一个表单然后选择另一个表单，之前选择的表单仍然是ie。如果我选择“更多信息”然后选择“提出要约”，我将获得两种形式而不是仅仅“提出要约”。我该如何解决这个问题？

Answer 1

您可以存储当前显示的表单

var curForm;
function showForm(formId){
    if (curForm != null) curForm.hide();
    curForm = $(formId);
    curForm.show();
}

然后在你的HTML中

<ul class="nav">
   <li><a href="#" onclick="showForm('#more_info'); return false;">
      More Information</a>
   </li>
   <li><a href="#" onclick="showForm('#road_test'); return false;">
      Book a Road Test</a>
   </li>
   <li><a href="#" onclick="showForm('#quote');return false;">
      Request a Quote</a>
   </li>
   <li><a href="#" onclick="showForm('#offer'); return false;">
      Make an Offer</a>
   </li>
   <li><a href="#" onclick="showForm('#contact'); return false;">
      General Contact</a>
   </li>
</ul>

Answer 2

这看起来像是jQuery提供的插件 http://docs.jquery.com/UI/Accordion 如果你想追求jQuery，这将是一件好事，或者至少看一下它的源代码。

使用javascript切换表单可见性

2 个答案: