切换<a></a>内的跨度

时间:2014-06-29 08:32:44

标签: javascript jquery html

我正在尝试创建一个函数来切换可选输入(如果选择),这是我到目前为止所做的:

HTML:

<div>
    <input>
    <a class="input-toggle" href="#"><span>Toggle Option</span><span>Close</span></a>
    <div class="input-toggle-content">
        <input name="">
    </div>
</div>

JavaScript的:

$('.input-toggle').each(function() {
    $(this).next("div").hide().end();
    $("span:last-of-type").hide();
    $(this).on('click', function() {
        $(this).next("div").slideToggle();
        $("span:first-of-type").hide();
        $("span:last-of-type").show();
    });
});

所以,它应该工作的方式是当点击.input-toggle时,它旁边的div将被切换,如果再次点击,div将会消失......我有点工作,但是,我我还希望用<span>Toggle Option</span>切换<span>Close</span>并且我无法正常工作......我不知道我的功能结构是否正确?

2 个答案:

答案 0 :(得分:3)

尝试,

$('.input-toggle + div.input-toggle-content').hide();
$(".input-toggle span:last-of-type").hide();

$('.input-toggle').click(function () {
    $(this).next('div.input-toggle-content').toggle();
    var spans = $('span', this);
    spans.not(spans.filter(':visible').hide()).show();
});

DEMO

答案 1 :(得分:0)

你去:http://jsfiddle.net/jPe3A/

$('.input-toggle').each(function() {
    $(this).next("div").hide().end();
    $("span:last-of-type").hide();
    $(this).on('click', function() {
        $(this).next("div").slideToggle();
        if($("span:first").is(':hidden')){
            $("span:first").show();
            $("span:last").hide();
        }
        else{
            $("span:first").hide();
            $("span:last").show();
            }
    });
});