Question

我正在尝试创建一个函数来切换可选输入（如果选择），这是我到目前为止所做的：

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>并且我无法正常工作......我不知道我的功能结构是否正确？

Answer 1

尝试，

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

Answer 2

你去：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();
            }
    });
});

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

2 个答案:

DEMO