Question

我希望这是一个简单的修复，或者我的逻辑可能就是关闭。我正在使用jquery创建一个手风琴菜单。手风琴的头部有单选按钮，在机身内部有时间表。我希望用户能够展开和折叠手风琴，并且当选择时间表时，所选的时间表将以红色勾勒出浅灰色背景。我所拥有的是，它只是将箭头旋转和toggleClass应用于每个元素而不是所选的单个元素。

当前发生的事情是当您单击“计划”时，所有箭头都在旋转而不是单个箭头。此外，当选择单选按钮时，它会使用“clickedSchedule”类突出显示每个div。

我认为这与在函数中使用（this）有关...我只是不确定如何编写它。也许我也没有以优雅的方式执行此操作，因此我对所有建议持开放态度。

HTML：

    <ul id="menu" class="dropdown">
    <div class="clickedSchedule">
    <li><a class="expanded"><div class="arrow"></div><h2>Schedule 1</h2></a>

    <div class="scheduleChoice" style="text-align:left;">
      <input name="first_choice" id="checkbox_first" type="radio" value="Schedule 1" /><label>First Choice</label>
      <input name="second_choice" id="checkbox_second" type="radio" value="Schedule 1" /><label>Second Choice</label>
      <input name="third_choice" id="checkbox_third" type="radio" value="Schedule 1" /><label>Third Choice</label>
    </div>
        <ul>
            <li>

              <div><img src="images/01_fall.gif" width="550" height="334" /></div>
              <div><img src="images/01_sp.gif" width="550" height="334" /></div>

            </li>
        </ul>
    </li>
    </div>

    <div class="clickedSchedule">
    <li><a class="expanded"><div class="arrow"></div><h2>Schedule 2</h2></a>
    <div class="scheduleChoice" style="text-align:left;">
      <input name="first_choice" id="checkbox_first" type="radio" value="Schedule 2" /><label>First Choice</label>
      <input name="second_choice" id="checkbox_second" type="radio" value="Schedule 2" /><label>Second Choice</label>
      <input name="third_choice" id="checkbox_third" type="radio" value="Schedule 2" /><label>Third Choice</label>
    </div>
        <ul>
            <li>            
                <div><img src="images/02_fall.gif" width="550" height="334" /></div>
                <div><img src="images/02_sp.gif" width="550" height="334" /></div>
            </li>
        </ul>
    </li>
    </div>
</ul>

Jquery的

<script>
//Expand/Collapses Menu & Rotates arrow
$(document).ready(function() {
    $("#menu:first li > a").click(function() {
        $(this).toggleClass("expanded").toggleClass("collapsed").parent().find('> ul').slideToggle("fast");
        $("#menu:first li > a > div").toggleClass("arrowUp").toggleClass("arrow");
    });
});
</script>
<script>
//highlights chosen Schedule
$(document).ready(function(){

  $("input[name$='first_choice']").click(function(){

  var radio_value = $(this).attr("checked");

  if(radio_value=='checked') {
    $("div.clickedSchedule").css({"border-color" : "red", "border-style" : "solid", "border-width" : "1px", "background-color" : "#f6f6f6"});
    }
  });
});
</script>

CSS：

我有一个切换这些类的toggleCLass。

.arrow {
    background:url(../images/accordionDropArrow_expanded.png) no-repeat;
    width:18px;
    height:17px;
    float:left;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
}

.arrowUp {
    background:url(../images/accordionDropArrow_expanded.png) no-repeat;
    width:18px;
    height:17px;
    float:left;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
}

也许我只是强迫这些东西在一起，并且有一个更优雅的编码解决方案。我将把它留给stackoverflow的神：）

更新

我添加了一个小提琴here

我正在运行最新的jquery脚本。如果单击结果中的第一个选项，则可以看到它正在选择每个clickedSchedule类而不是一个。

Answer 1

我想你想要的是限制用户一次只能选择一个单选按钮。要使一组单选按钮互斥，只需为所有单选按钮添加相同的名称即可。我希望这是你的问题:)

例如：

<input type="radio" name="choice" id="choice1" />
<input type="radio" name="choice" id="choice2" />

Answer 2

经过一些简化和进一步研究后，我能够让它发挥作用。

我使用的Stack文章可以找到here

一旦我了解了输入：不是（：选中）选项，这是一块蛋糕。

以下是jQuery代码：

$(document).ready(function(){
    $(document).ready(function(){
    //add the Selected class to the checked radio button
    $('input:checked').parent().parent().parent().addClass("clickedSchedule");
    //If another radio button is clicked, add the select class, and remove it from the previously selected radio
    $('input').click(function () {
        $('input:not(:checked)').parent().parent().parent().removeClass("clickedSchedule");
        $('input:checked').parent().parent().parent().addClass("clickedSchedule");
    });
});
});

<强> HTML：

<div class="unclickedSchedule">
<li><a class="expanded"><h2>Schedule 2</h2></a>
<div class="scheduleChoice" style="text-align:left;">
  <input name="first_choice" id="checkbox_first" type="radio" value="Schedule 2" /><label>First Choice</label>
  <input name="second_choice" id="checkbox_second" type="radio" value="Schedule 2" /><label>Second Choice</label>
  <input name="third_choice" id="checkbox_third" type="radio" value="Schedule 2" /><label>Third Choice</label>
</div>
    <ul>
        <li>            
            <div style="width:550px;padding:0 0 0 50px;"><img src="images/animation/02_fall.gif" width="550" height="334" /></div>
            <div style="width:550px; padding:0  0 20px 50px;;"><img src="images/animation/02_sp.gif" width="550" height="334" /></div>
        </li>
    </ul>
</li>
</div>

这不能解决原始问题中的旋转箭头，但在单击单选按钮时会解析突出显示的选项。

隔离jquery函数中的类

2 个答案: