-4
<script>
\t jQuery(document).ready(function ($){
\t \t function toggleChevron(e) {
\t \t \t $(e.target)
\t \t \t \t .prev('.panel-heading')
\t \t \t \t .find("i")
\t \t \t \t .toggleClass('fa-plus fa-minus');
\t \t
\t \t \t }
\t \t \t
\t \t \t $('#accordion').on('hidden.bs.collapse', toggleChevron);
\t \t \t $('#accordion').on('shown.bs.collapse', toggleChevron); \t \t
\t \t }); \t
</script><div class="col-md-8 hidden-xs"> \t \t \t \t \t \t
\t <div id="carousel">
\t <a href="#"><img src="<?php echo IMAGES. '/home-1.jpg' ?>" id="item-1" /></a>
\t <a href="#"><img src="<?php echo IMAGES. '/home-2.jpg' ?>" id="item-2" /></a>
\t <a href="#"><img src="<?php echo IMAGES. '/home-3.jpg' ?>" id="item-3" /></a> \t \t \t \t \t \t \t \t
\t </div> \t \t
</div>
<div class="col-md-4 rooms-description"> \t
\t <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
\t <div class="panel panel-default">
\t \t <div class="panel-heading" role="tab" id="headingOne">
\t \t <h4 class="panel-title"> \t \t \t \t
\t \t \t <a role="button" data-toggle="collapse" data-parent="#accordion" data-item="item-1" href="#roomsOne" aria-expanded="true" aria-controls="roomsOne">
\t \t \t <?php printf(esc_html__('Standard Studio', 'la-vida-suite')); ?>
\t \t \t </a>
\t \t \t <i class="fa fa-minus pull-right"></i>
\t \t </h4>
\t \t </div>
\t \t <div id="roomsOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
\t \t <div class="panel-body">
\t \t \t <p><?php printf(esc_html__('Extremely Spacious and comfortable for couples', 'la-vida-suite')); ?></p>
\t \t \t <p><?php printf(esc_html__('Located on the eighth floor,', 'la-vida-suite')); ?></p>
\t \t \t <p><?php printf(esc_html__('King or Twin Bed', 'la-vida-suite')); ?></p>
\t \t \t <p><?php printf(esc_html__('Some rooms are connected (by request)', 'la-vida-suite')); ?></p>
\t \t \t <p><?php printf(esc_html__('Room Size is 30 m²', 'la-vida-suite')); ?></p>
\t \t </div><!-- panel-body-->
\t \t </div>
\t </div><!-- panel-default-->
\t <div class="panel panel-default">
\t \t <div class="panel-heading" role="tab" id="headingTwo">
\t \t <h4 class="panel-title">
\t \t \t <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" data-item="item-2" href="#roomsTwo" aria-expanded="false" aria-controls="roomsTwo">
\t \t \t <?php printf(esc_html__('Executive Studio', 'la-vida-suite')); ?>
\t \t \t </a>
\t \t \t <i class="fa fa-plus pull-right"></i>
\t \t </h4>
\t \t </div>
\t \t <div id="roomsTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
\t \t <div class="panel-body">
\t \t \t <p><?php printf(esc_html__('Extremely Spacious and comfortable for couples', 'la-vida-suite')); ?></p>
\t \t \t <p><?php printf(esc_html__('Located on the ninth floor,', 'la-vida-suite')); ?></p>
\t \t \t <p><?php printf(esc_html__('King or Twin Bed', 'la-vida-suite')); ?></p>
\t \t \t <p><?php printf(esc_html__('Some rooms are connected (by request)', 'la-vida-suite')); ?></p>
\t \t \t <p><?php printf(esc_html__('Room Size is 30 m²', 'la-vida-suite')); ?></p>
\t \t </div><!-- panel-body-->
\t \t </div>
\t </div><!-- panel-default-->
\t <div class="panel panel-default">
\t \t <div class="panel-heading" role="tab" id="headingThree">
\t \t <h4 class="panel-title">
\t \t \t <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" data-item="item-3" href="#roomsThree" aria-expanded="false" aria-controls="roomsThree">
\t \t \t <?php printf(esc_html__('Deluxe 1 Bedroom', 'la-vida-suite')); ?>
\t \t \t </a>
\t \t \t <i class="fa fa-plus pull-right"></i>
\t \t </h4>
\t \t </div>
\t \t <div id="roomsThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
\t \t <div class="panel-body">
\t \t \t <p><?php printf(esc_html__('For More Than One couple or a family', 'la-vida-suite')); ?></p>
\t \t \t <p><?php printf(esc_html__('Located on the lower floors', 'la-vida-suite')); ?></p>
\t \t \t <p><?php printf(esc_html__('King or Twin Bed', 'la-vida-suite')); ?></p> \t \t \t \t \t \t \t
\t \t \t <p><?php printf(esc_html__('Apartment size is 55 m²', 'la-vida-suite')); ?></p>
\t \t </div>
\t \t </div><!-- panel-body-->
\t </div><!-- panel-default--> \t
\t </div><!-- panel-group-->
</div><!--col-md-4-->我已采取两列：COL-MD-8和col-MD-4。在第四版中，手风琴有数据项目1，项目2和项目3。在col-md-8中，轮播中有3张图片。 我想要这样的结果。如果一个手风琴面板处于活动状态，则应该显示相应的轮播图像。例如，如果数据项目= 2是活动的，则应该出现具有图像标识=“项目-2”的转盘。 我还包括了一个脚本，我在手风琴中给出了（+， - ）的切换选项。我应该如何在脚本中编写代码，以便获得理想的结果？ 我需要帮助。
没有你的元素都有'id'属性...？另外，嵌套的'a'元素是无效的HTML。他们将成为兄弟姐妹。 –
我编辑了这个问题。立即检查。我想把多个数据项放入jQuery中，这样当我点击时他们会做任何操作。 –