0

我有两个单选按钮。一个低于另一个。我希望下面的显示在第一个的选中按钮下方，保持在第一个的宽度范围内并且以动态方式显示。谢谢你的帮助。

<script>
$(function() {
$( "#categorie" ).buttonset();
$( "#types" ).buttonset();
});
</script>
</head>
<body>
<form>

<div id="categorie">
<input type="radio" id="categorie1" name="categorie" checked="checked"/><label for="categorie1">bla</label>
<input type="radio" id="categorie2" name="categorie"  /><label for="categorie2">bla</label>
<input type="radio" id="categorie3" name="categorie" /><label for="categorie3">bla</label>
</div>

<div id="types">
<input type="radio" id="type1" name="type" checked="checked"/><label for="type1">bla</label>
<input type="radio" id="type2" name="type"  /><label for="type2">bla</label>
<input type="radio" id="type3" name="type" /><label for="type3">bla</label>
</div>
4

1 回答 1

0

我不确定这是否是您的问题，据我了解，请在 jsfiddle 上查看，http://jsfiddle.net/t7x9B/18/

$('input[name="categorie"]').click(function(){
  $('#categorie').find('#inner').remove();
  $(this).parent().append($("#types").html());
});

和 html

<div id="categorie">
    <div id="first" style="display:block;float:left">
        <input type="radio" id="categorie1" name="categorie" checked="checked" />
        <label for="categorie1">bla1</label>
    </div>
    <div id="second" style="display:block;float:left">
        <input type="radio" id="categorie2" name="categorie" />
        <label for="categorie2">bla2</label>
    </div>
    <div id="third" style="display:block;float:left">
        <input type="radio" id="categorie3" name="categorie" />
        <label for="categorie3">bla3</label>
    </div>
</div>
<div id="types" style="display:none;">
    <div id="inner">
        <br>
        <input type="radio" id="type1" name="type" checked="checked" />
        <label for="type1">bla_a</label>
        <br>
        <input type="radio" id="type2" name="type" />
        <label for="type2">bla_b</label>
        <br>
        <input type="radio" id="type3" name="type" />
        <label for="type3">bla_c</label>
    </div>
</div>
于 2013-05-23T06:50:38.323 回答