Question

我想要完成的是，当用户点击+时，相应的“回答”div会出现在右侧显示信息上。现在它确实打开了正确的“回答”div，但是如果再次点击相同的+，则div不会关闭，我希望它关闭。如果用户点击不同的+，即使之前点击了一个，也会打开一个就好了。

我尝试过使用提供的代码，但是我无法获得“回答”div以解开自己的问题。

jQuery的：

    <script type="text/javascript">  
$(document).ready(function(){
    $('.toggle').click(function(e){
        var plus = $(this);
        if(plus.hasClass('expanded')){
            $('.content_box_display').empty();
            plus.removeClass('expanded');
        }else{
            var targetId = plus.attr('class').split('question')[1];
            $('.content_box_display').html($('#answer'+targetId).html());
            plus.addClass(' expanded');
        }
    });
});
  </script>

HTML：

    <div class="et_pb_section  et_pb_section_2 et_section_regular">



                    <div class=" et_pb_row et_pb_row_1">


                <div class="et_pb_column et_pb_column_4_4  et_pb_column_2">

                <div class="et_pb_text et_pb_module et_pb_bg_layout_light et_pb_text_align_center  et_pb_text_2">

<h1>Where Do You Have Pain?</h1>

            </div> <!-- .et_pb_text -->
            </div> <!-- .et_pb_column -->
            </div> <!-- .et_pb_row --><div class="et_pb_row et_pb_row_2 et_pb_row_fullwidth et_pb_row_4col">


                <div class="et_pb_column et_pb_column_1_4  et_pb_column_3 et_pb_column_empty">


            </div> <!-- .et_pb_column --><div class="et_pb_column et_pb_column_1_4  et_pb_column_4">

                <div id="foot-diagram" class="et_pb_text et_pb_module et_pb_bg_layout_light et_pb_text_align_left  et_pb_text_3">

<div class="one_third et_column_last">
                    <div class="content_box">
<div id="toes" class="toggle question1"><a name="#answer1"></a></div>
</div>
<div class="content_box">
<div id="arch-heel" class="toggle question2"><a name="#answer2"></a></div>
</div>
<div class="content_box">
<div id="ankle" class="toggle question3"><a name="#answer3"></a></div>
</div>
<div class="content_box">
<div id="skin" class="toggle question4"><a name="#answer4"></a></div>
</div>
                </div><div class="clear"></div>

            </div> <!-- .et_pb_text -->
            </div> <!-- .et_pb_column --><div class="et_pb_column et_pb_column_1_4  et_pb_column_5">

                <div class="et_pb_text et_pb_module et_pb_bg_layout_dark et_pb_text_align_left  et_pb_text_4">

<h3 style="float: left;">Click each</h3>
<div class="plus-sign" style="display: inline-block; vertical-align: middle; float: left; width: 20px; position: absolute; height: 20px; top: 20px; margin-left: 10px;"></div>
<p style="clear: both;">to view what type of pain is associated with that part of the foot</p>

            </div> <!-- .et_pb_text --><div id="yoga-answer" class="et_pb_text et_pb_module et_pb_bg_layout_dark et_pb_text_align_left  et_pb_text_5">

<div id="answer1">
<div class="blue-back animated">
<h2>Toes</h2>
<ul>
<li>Fungus Nail</li>
<li>Ingrown Toenail</li>
<li>Hammer Toe</li>
<li>Bunion</li>
<li>Bone Spur</li>
</ul>
</div>
</div>
<div id="answer2">
<div class="blue-back animated">
<h2>Arch &amp; Heel</h2>
<ul>
<li>Plantar Fasciitis</li>
<li>Heel Spur</li>
<li>Achilles Pain</li>
<li>Pump Bump</li>
</ul>
</div>
</div>
<div id="answer3">
<div class="blue-back animated">
<h2>Ankle</h2>
<ul>
<li>Fracture</li>
<li>Sprain</li>
</ul>
</div>
</div>
<div id="answer4">
<div class="blue-back animated">
<h2>Skin</h2>
<ul>
<li>Athlete’s Foot</li>
<li>Sprain</li>
<li>Other</li>
</ul>
</div>
</div>
<div id="question" class="content_box_display"></div>

            </div> <!-- .et_pb_text -->
            </div> <!-- .et_pb_column --><div class="et_pb_column et_pb_column_1_4  et_pb_column_6 et_pb_column_empty">


            </div> <!-- .et_pb_column -->
            </div> <!-- .et_pb_row --><div id="blue-accords" class=" et_pb_row et_pb_row_3">


                <div class="et_pb_column et_pb_column_4_4  et_pb_column_7">

                <div class="et_pb_module et_pb_accordion  et_pb_accordion_0">

            </div> <!-- .et_pb_accordion -->
            </div> <!-- .et_pb_column -->
            </div> <!-- .et_pb_row -->

            </div>

CSS：

#foot-diagram {
  height: 350px;
  max-height: 350px;
  margin-bottom: 0px !important;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
#foot-diagram p {
  font-size: 1.7em;
  color: #ddd;
  line-height: 1.4em;
  width: 85%;
  padding-bottom: 30px;
  font-weight:bold;
}


#foot-diagram a {
  font-size: 1.7em;

}
.plus-sign {
  display:inline-block;
  height:30px;
  width:30px;
  background:url("/wp-content/uploads/2017/04/plus.png");
  background-size: contain;
  transition: all 500ms ease-in-out;
}
.toggle {
  display:inline-block;
  height:30px;
  width:30px;
  background:url("/wp-content/uploads/2017/04/plus.png");
  background-size: contain;
  transition: all 500ms ease-in-out;
  transform: rotate(0deg);
}
.toggle.expanded{
  background:url("/wp-content/uploads/2017/04/plus.png");
  background-size: contain;
  transform: rotate(45deg);
  transition: all 500ms ease-in-out;
}


.animated {
  animation: .55s fadeIn 0.25s ease-in-out both;
}

.content_box_display {
  height: auto;
  background-color: rgba(255, 255, 255, 0);
}
.blue-back h2 {
  color: #005699 !important;
  padding-top: 18px;
  font-size: 1.6em;
}
.blue-back {
  padding: 0px 25px 25px 30px;
  border-radius: 0px;
  color: #555;
  background-color: #fff !important;
}

.blue-back li a {
  color: #555 !important;
}
.blue-back p {
  line-height: 1.8em;
}
#answer1, #answer2, #answer3, #answer4, #answer5, #answer6, #answer7, #answer8, #answer9 {
  display: none;
}


#toes.toggle {
  position: absolute !important;
  top: 240px;
  left: 285px;
}
#arch-heel.toggle {
  position: absolute !important;
  top: 240px;
  left: 105px;
}
#ankle.toggle {
  position: absolute !important;
  top: 40px;
  left: 70px;
}
#skin.toggle {
  position: absolute !important;
  top: 170px;
  left: 145px;
}

Answer 1

现在你的$(document).ready(function(){ $('.toggle').click(function(e){ var plus = $(this); if(plus.hasClass('expanded')){ $('.content_box_display').empty(); plus.removeClass('expanded'); }else{ var targetId = plus.attr('class').split('question')[1]; $('.content_box_display').html($('#answer'+targetId).html()); plus.addClass(' expanded'); } }); });没有做任何事情，因为你在问题中点击了内容。

全部删除并尝试：

Could not parse 'event_date' as a timestamp. Required format is YYYY-MM-DD HH:MM[:SS[.SSSSSS]]

元素不会关闭

1 个答案: