0

我希望这是一个简单的修复，或者我的逻辑可能是错误的。我正在使用 jquery 创建手风琴菜单。手风琴的头部有单选按钮，机身内部有时间表。I want the user to be able to expand and collapse the accordion, and when a schedule is chosen, the selected schedule will be outlined in red with a light grey background. 我正在工作，它只是将箭头旋转和toggleClass应用于每个元素，而不是选择的单个元素。

当前发生的情况是，当您单击“计划”时，所有箭头都在旋转，而不是单个箭头。Also, when a radio button is selected , it is highlighting every div with the "clickedSchedule" class.

我认为这与在函数中使用 (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的神:)

更新

我在这里添加了一个小提琴

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

4

2 回答 2

0

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

例如：

<input type="radio" name="choice" id="choice1" />
<input type="radio" name="choice" id="choice2" />
于 2012-04-26T17:18:35.467 回答
0

After some simplification and further research, I was able to get it to work.

The Stack article I used can be found here

It was a piece of cake once I learned about the input:not(:checked) option.

Here is the jQuery code:

$(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>

This does not address the rotating arrows in my original question, but does resolve the highlighted selection when a radio button is clicked.

于 2012-05-01T16:11:21.243 回答