使用 jquery 创建 faq 首字母缩略词 [关闭]答案

【问题标题】：Create faq acronym with jquery [closed]使用 jquery 创建 faq 首字母缩略词 [关闭]
【发布时间】：2014-02-25 06:37:52
【问题描述】：

我想要这样的常见问题解答页面http://videoguard.pt/en/support/#section2

我正在这样做

这是我的 HTML 代码

<!DOCTYPE html>
<html>
<head>
<title>FAQ ACRONYM</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("a").click(function(){
    $("p").toggle();
  });
});
</script>
</head>
<body>
<div id="main">
    <div id="section1">
        <ul class="sec1-style">
            <li><a href="#f1">I completed the payment process online but did not receive an order confirmation. Did you receive my order?</a></li>
            <li><a href="#f2">I still have not received my items, when will I get them?</a></li>
            <li><a href="#f3">How do I change my address?</a></li>
            <li><a href="#f4">How do I cancel/change my order?</a></li>
        </ul>
    </div>
    <div id="section2">
        <ul>
            <li id="f1"><p>If you have received an on-page confirmation, this means your order did go through. Do check your spam box to see if your order confirmation was filtered there by your email server.</p></li>
            <li id="f2">On average, local deliveries should reach within 1-3 working days. If has been more than 3 working days, do send us an email with the delivery address and invoice number so we can do a status check for you.</li>
            <li id="f3">Log in with your Handymon account and update the changes under my personal details. However if you have just purchased under your old address and would like to re-direct the package, please drop us an email at askme@handymon.com as soon as possible. We will try to cancel/modify your order before it is mailed out.</li>
            <li id="f4">Please drop us an email at askme@handymon.com as soon as possible. We will try to cancel/modify your order before it is mailed out.</li>
        </ul>
    </div>
</div>
</body>
</html>

这是我的 CSS

#main
{
    width:100%;
    height:600px;
    margin:auto;
    }

#section1
{
    width:50%;
    height:600px;
    float:left;
    border:2px solid red;
    border-radius:5px;
}

#section2
{
    width:49%;
    height:600px;
    float:right;
    border:2px solid grey;
    border-radius:5px;
}

帮助我，我被困住了，我想这样做http://videoguard.pt/en/support/#section2 指导我如何做到这一点

【问题讨论】：

你没有被卡住我的朋友.. 你还没有开始它。在您的情况下，您甚至不需要 jQuery，只需使用 css 样式尝试它。
啊啊！！同样的问题！检查此链接。 http://stackoverflow.com/questions/6967081/show-hide-multiple-divs-with-jquery.
如何处理css，但我也想要幻灯片效果检查这个链接我想要这样videoguard.pt/en/support/#section2
您提供的链接中的幻灯片效果在哪里？
没有幻灯片效果抱歉，但我想像这样创建我的常见问题解答，请指导我如何？

标签： javascript jquery html css acronym

【解决方案1】：

对于幻灯片效果使用 jquery UI

DEMO

$(document).ready(function(){
  $("a").click(function(e){
      e.preventDefault();
     var link= $(this).attr("href");
     $("#section2 ul li").hide();
     $(link).show("blind");
  });
});

【讨论】：

【解决方案2】：

试试看……

<script>
$(document).ready(function(){
    $('#section2 ul li').hide();
    $('#section2 ul li:first').show();
  $("a").click(function(){
      var target = $(this).attr('href');
    $('#section2 ul li').hide();
    $(target).toggle();
  });
});
</script>

【讨论】：

【解决方案3】：

您有一个小脚本问题。试试这个：

$(document).ready(function(){
    $("#section2 li:not(:first)").hide();
    $("a").click(function(){
        $("#section2 li").hide();
        $($(this).attr("href")).toggle();
        return false;
    });
});

【讨论】：