Question

我有以下页面，其中HTML / Jquery在标题点击上展开/折叠内容。

<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="Style.css">
</head>
<body style="font-family:Arial; font-size:16; color:#003c6e; background-color:#E8E5D5;" link="#003c6e" vlink="#003c6e" alink="#003c6e">

<h3 style="font-size:22; font-weight: normal;">
First Header
</h3>

<h3>
    Section Header
</h3>

<div class="container">
    <div class="header">
                <img class="PfeilR" src="Pfeil_rechts_blau.png" style="height:12px;">
                <img class="PfeilO" src="Pfeil_oben_weiss.png" style="height:12px;">

            <span>
                Expander Header
            </span>
    </div>

    <div class="content">
        <hr>
            My content
        <hr>
    </div>
</div>

<div class="container">
    <div class="header">
                <img class="PfeilR" src="Pfeil_rechts_blau.png" style="height:12px;">
                <img class="PfeilO" src="Pfeil_oben_weiss.png" style="height:12px;">

            <span>
                Expander Header
            </span>
    </div>

    <div class="content">
        <hr>
            More content
        <hr>
    </div>
</div>

<script src="jquery-1.11.3.js"></script>
<script>
    $(".header").click(function () {

        $header = $(this);
        //getting the next element
        $content = $header.next();
        //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
        $content.slideToggle(500, function () {
            //execute this after slideToggle is done


            //TODO change image of header based on visibility of content div


        });

    });
</script>

</body>

我希望能够在显示/隐藏内容部分时隐藏两个图像中的一个（PfeilR / PfeilO），但仅限于所点击的内容部分而不是全部。

如果需要，这是CSS

.container .content {
display: none;
padding-top : 10px;
padding-bottom : 20px;}

这是应用程序当前的样子，两个图像始终显示

我知道这可能是一个重复的问题，并为此道歉，但我还没有完全了解JQuery以适应其他示例。

感谢任何帮助。 TY

Answer 1

您可以将2个图像作为跨度的2个类，并在单击时更改该类。

假设PfeilO是您最初想要看到的箭头

 <div class="header PfeilO">
     <span>
         Header
     </span>
</div>

并在点击处理程序

中的脚本中添加以下行

$(this).toggleClass("PfeilR").toggleClass("Pfeil0")

OR

另一种解决方案是在点击时隐藏图像。您可以将其添加到单击处理程序

中的脚本中

$(this).find(".PfeilR").toggle().end().find(".PfeilO").toggle()

还假设您希望默认情况下看到PfeilO来添加css。

.PfeilR{
   display : none
}

Answer 2

您好，您可以使用bootstrap accordian

<div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1. What is HTML?</a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
                <div class="panel-body">
                    <p>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages. <a href="http://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a></p>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">2. What is Bootstrap?</a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>Bootstrap is a powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank">Learn more.</a></p>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">3. What is CSS?</a>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. <a href="http://www.tutorialrepublic.com/css-tutorial/" target="_blank">Learn more.</a></p>
                </div>
            </div>
        </div>
    </div>

或者如果你想在jquery中这里是下面的代码。

Html Part

<div class="faq_section_body">
         <h3 class="active">Till when can I claim my Theft Insurance?</h3>
         <div style="">
            <p>your answer here</p>
         </div>
         <h3>What is the customer care number?</h3>
         <div style="display: none;">
            <p>Our toll free number is 123456789</p>
         </div>
      </div>

JQuery Part

$(document).ready(function() {
        $('.faq_section_body h3').each(function() {
                    var tis = $(this),
                        state = false,
                        answer = tis.next('div').slideUp();
                    tis.click(function() {
                            $('.faq_section_body div').not($(this).next('div')).not('.clearfix').hide(500);
                            state = !state;
                            answer.slideToggle(state);
                            tis.toggleClass('active',state);
                        });
                });
    });

希望这会对你有所帮助。

Jquery在展开/折叠时替换图像

2 个答案: