Question

我是一个jQuery初学者。我创建了一个类似FAQ的页面，当我单击该问题时，其详细信息将显示，其余答案将被隐藏。请检查我的代码并提出您的建议。另外，如果有任何替代代码，请提供解释。

$("div").children("p").hide();
    $(document).ready(function () {
    
        $("h1").click(function () {
            $("div").children("p").hide();
            $(this).next("p").show();
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
        <head>
            <meta charset="UTF-8">
            <title>FAQ</title>
        </head>
        <body>
            <div class="faq">
                <h1>1. Question 1</h1>
                <p>Details1</p>
                <h1>2. Question 2</h1>
                <p>Details 2</p>
                <h1>3. Question 3</h1>
                <p>Details 3</p>
            </div>
        </body>
    </html>

Answer 1

您在DOM ready上使用slideToggle()和$("div").children("p").hide();：

$("h1").on('click', function() {
  $(this).next("p").slideToggle('slow');
});

$(document).ready(function() {
  $("div").children("p").hide();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<html>

<head>
  <meta charset="UTF-8">
  <title>FAQ</title>
</head>

<body>
  <div class="faq">
    <h1>1. Question 1</h1>
    <p>Details1</p>
    <h1>2. Question 2</h1>
    <p>Details 2</p>
    <h1>3. Question 3</h1>
    <p>Details 3</p>
  </div>

</body>

</html>

Answer 2

我会给元素提供一些课程答案肯定不仅仅是一个<p> 所以我会将它们包含在<div>中，并使用类来定位它。

$(document).ready(function () {
  $(".answer").hide();
  
  $(".question").click(function () {
    $(".answer").hide();
    $(this).next(".answer").show();
  });
});

.someStyle{
  color:blue;
  font-family:arial;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="faq">
  <h1 class="question">1. Question 1</h1>
  <div class="answer">
    <p>Details 1</p>
    <ol>
      <li> Some other elements!!!</li>
      <li> Cool.</li>
  </div>
  <h1 class="question">2. Question 2</h1>
  <div class="answer">
    <p>Details 2</p>
    <img src="http://lorempixel.com/200/100/sports">
  </div>
  <h1 class="question">3. Question 3</h1>
  <div class="answer">
    <p>Details 3</p>
    Okay... <span class="someStyle">That is an answer.</span>
  </div>
</div>

Answer 3

试试这个。在所有h1标签中添加onclick

Sub SendMail()

Dim objOutlook As Object
Dim objMail As Object
Dim ws As Worksheet

Set objOutlook = CreateObject("Outlook.Application")
Set ws = ActiveSheet
For Each cell In ws.Range("A2:A1000") 
  Set objMail = objOutlook.CreateItem(0)
  With objMail
    .To = cell.Value
    .Subject = cell.Offset(0, 1).Value
    .Body = cell.Offset(0, 2).Value
    .Attachments.Add cell.Offset(0, 3).Value
    'display will show you email before it is sent, replace it with "send" and it will sent email without displaying
    .send          
  End With
  Set objMail = Nothing
Next cell

Set ws = Nothing
Set objOutlook = Nothing

End Sub

然后在您的脚本中使用它

<h1 onclick="fun(this)">1. Question 1</h1>

jQuery FAQ详细信息显示/隐藏

3 个答案: