Question

我需要帮助隐藏/取消隐藏相邻的跨度。我正在使用手风琴结构构建一系列常见问题解答。我需要在默认情况下截断每个问题，但点击后，问题必须完整显示。最后，当点击打开常见问题解答（或另一个）时，问题应该返回截断形式。

我的标记是这种形式 - 我在一个范围内放置了问题的截断版本，在相邻范围内放置了未截断的版本：

> <div class="accord"><h4><span class="shortver">What steps do I need to
> take to ...</span><span class="longver hide">What steps do I need to
> take to install a constructed wetland?</span></h4><div
> class="faqcontent">Answer goes here</div>...</div>

以下功能控制常见问题：

function fnSetUpPageFAQAccordion(){
  $(".accord > div").hide();
  $(".accord > h4").click(function(){           
  $(this).find('span.shortver').addClass("hide").next('span.longver').removeClass('hide');
  $(this).toggleClass("close").siblings("h4.close").removeClass("close");
  $(this).next("div").slideToggle("1500").siblings("div:visible").slideUp("1000");return;
  }); };

此代码会关闭问题的截断版本，并在点击常见问题时打开完整版本。我无法弄清楚当再次点击常见问题时（或点击页面上的其他常见问题解答）时如何撤消该序列。

任何建议 - 或许有一个更好的方法？

感谢/布鲁斯

Answer 1

这是一种略有不同的方法和解决方案。我想你可以简化这个。而不是短版本的1跨度和长版本的1，将解释的开头放在第一个（让我们称之为class =“questionStart”），其余的放在第二个（class =“questionEnd”）。这样你就可以让开头始终可见，只担心在第二节翻转课程。这比较简单，但您需要删除“...”，这可能不值得为可读性丢失。

要解决在单击其他内容时隐藏元素的问题，请尝试添加onClick事件，该事件首先将hide类添加到所有“questionEnd”跨度，然后将其切换为您单击的那个。我没有尝试过，但我认为你可以用原来的方法或我的方法很容易地完成这项工作。

隐藏在手风琴中的跨度

1 个答案: