0

所以我做了一个显示/隐藏脚本来打开和关闭被点击的元素。但现在我无法让它以某种方式工作，我不知道为什么。

有人可以试试看吗？

HTML

<div id="fleresvar" class="fleresvar">  <u><b>Klik her for at se flere svar</b></u>

    <div id="txtmore" class="txtmore" style="display:none;">
        <div id="txtask1" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;"></div>
        <div id="txtask2" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;"></div>
        <div id="txtask3" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;"></div>
        <div id="txtask4" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;"></div>
        <div id="txtask5" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;"></div>
</div

JavaScript

$("#fleresvar").click(function () {
    var $element = $(this);
    if ($(this).hasClass('open')) {
        $element.removeClass("open");
        $element.children(".txtmore").hide(500);
    } else {
        $(".open").removeClass("open");
        $('.txtmore').hide(500);

        $element.toggleClass('open');
        $element.children('.txtmore').toggle(500);
    }

});

jsFiddle

4

4 回答 4

2

检查这个小提琴

$(document).ready(function(){
    $(".fleresvar").on('click','.handler',function () {
        var $element = $(this).closest('.fleresvar');
        if ($element.hasClass('open')) 
        {
            $element.removeClass("open");
            $element.find(".txtmore").hide(500);
        } 
        else 
        {
            $(".open").removeClass("open");
            $('.txtmore').hide(500);    
            $element.addClass('open');
            $element.find('.txtmore').show(500);
        }    
    });
});

HTML

<div id="fleresvar" class="fleresvar">  
    <div class="handler"><u><b>Klik her for at se flere svar</b></u></div>
    <div id="txtmore" class="txtmore" style="display:none;">
        <div id="txtask1" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;">txtask1</div>
        <div id="txtask2" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;">txtask2</div>
        <div id="txtask3" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;">txtask3</div>
        <div id="txtask4" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;">txtask4</div>
        <div id="txtask5" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;">txtask5</div>
    </div>
</div>

<div id="fleresvar2" class="fleresvar"> 
    <div class="handler"><u><b>Klik her for at se flere svar</b></u></div>
    <div id="txtmore" class="txtmore" style="display:none;">
        <div id="txtask1" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;">txtask1</div>
        <div id="txtask2" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;">txtask2</div>
        <div id="txtask3" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;">txtask3</div>
        <div id="txtask4" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;">txtask4</div>
        <div id="txtask5" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;">txtask5</div>
    </div>
</div>
于 2013-10-23T06:44:26.950 回答
0

显示/隐藏脚本

    var toggle = 0;

$("#fleresvar").click(function (e) {
if (toggle == 0) {
            $('.txtmore').stop(true,true).show('500');
            toggle = 1;
        } else if (toggle == 1) {
            $('.txtmore').stop(true,true).hide('500');
            toggle = 0;
        }
        e.stopPropagation();
        return false;

});

和例子

演示

于 2013-10-23T06:39:08.280 回答
0

检查这个小提琴：

$("#fleresvar").click(function () {
    var $element = $(this);
    if ($(this).hasClass('open')) {
        $element.removeClass("open");
        $element.children(".txtmore").hide(500);
    } else {
        $(".open").removeClass("open");        

        $element.toggleClass('open');
        $element.children('.txtmore').show(500);
        $('.txtmore').show(500);
    }

});
于 2013-10-23T06:51:34.840 回答
0

看起来您的代码确实有效，但 txtask* div 中没有内容，因此没有显示任何内容。如果您在其中添加一些内容，您将看到切换操作。不过，我有几点建议：

<u>and标签在 HTML4中<b>被弃用，然后在 HTML5 中被带回用于语义含义。换句话说，这些标签只有在它们增加了意义时才应该使用（例如，如果您在一个拼写错误的单词下划线）。您应该使用 CSS来实现和相同的效果text-decoration: underline;。font-weight: bold;有关更多信息，请参见此处：http: //html5doctor.com/u-element/

此行：$element.children(".txtmore").hide(500);可以简化为：$('#txtmore').hide(500);

这做了两件事：您不必再使用 children 函数，因此处理较少。此外，在 jQuery 中按 ID选择比按类选择要快得多。它不会对 5 个元素产生影响，但是当您进入更复杂的项目时会产生影响。如果您需要的元素是唯一的（即整个页面上只有一个），则使用 ID。

看起来您想在主#fleresvar div 上切换 .open 类；如果这是唯一的地方，那么这两行是冲突的： $(".open").removeClass("open"); $element.toggleClass('open');

第一行将从所有带有 .open 的元素中删除 .open，然后第二行会将 .open 添加到#fleresvar。如果您只想从主元素中添加/删除它，则执行$element.addClass('open')and $element.removeClass('open'), OR$element.toggleClass('open')两次。我个人喜欢使用 addClass 和 removeClass，这样我就可以确定该类被添加/删除了。

对于 txtask* div：不要在每个 div 上放置相同的内联样式，而是向它们添加一个公共类，然后将样式移动到您的 CSS 文件中。

这是带有我推荐更改的 jsFiddle：http: //jsfiddle.net/2Saph/9/

HTML：

<div id="fleresvar" class="fleresvar">Klik her for at se flere svar
    <div id="txtmore" class="txtmore">
        <div id="txtask1" class='txtask'>a</div>
        <div id="txtask2" class='txtask'>b</div>
        <div id="txtask3" class='txtask'>c</div>
        <div id="txtask4" class='txtask'>d</div>
        <div id="txtask5" class='txtask'>e</div>
    </div>
</div>

JS：

$("#fleresvar").on('click', function (evt) {
    evt.preventDefault();
    var $element = $(this);
    if ($element.hasClass('open')) {
        $element.removeClass("open");
        $('#txtmore').hide(500);
    } else {
        $element.addClass("open");
        $('#txtmore').show(500);
    }
});

CSS：

#fleresvar {
    cursor:pointer;
    background-position: 0 4px;
    min-height: 15px;
    border: 0 solid #000000;
    margin: 2px 0 5px 0;
    padding: 0 0 0 15px;
    background-image:url('/images/images/Pil_normal.png');
    background-repeat: no-repeat;
    font-weight: bold;
    text-decoration: underline;
}
#fleresvar.open {
    background-image: url('/images/images/Pil_open.png');
}
#txtmore {
    display: none;
    width: 280px;
    min-height:15px;
    border: 0 solid #000000;
    margin: 0;
}
div.txtask {
    text-decoration:underline;
    color:#8F8F8F;
    cursor:pointer;
}
于 2013-10-23T07:23:51.127 回答