Question

我正在寻找一种更好的方法来重写一个简单的显示/隐藏jQuery切换，这可以允许基于使用div选择器的实现;并且不修改HTML标记（因此没有添加类.hidden等）

我有一系列带有.djseform_field类的div，其中没有其他选择器;只想使用这个类将这些div转换为show / hide jQuery toggles。

Answer 1

可能是这样的：

$(document).ready(function() {
    // choose text for the show/hide link
    var showText='read more...';
    var hideText='hide';

    // initialise the visibility check
    var isVisible = false;

    // append show/hide links to the element directly preceding the element with a class of "djseform_field"
    $('.djseform_field').prev().append(' <a href="#" class="toggleLink">'+showText+'</a>');

    // hide all of the elements with a class of 'djseform_field'
    $('.djseform_field').hide();

    // capture clicks on the toggle links
    $('a.toggleLink').click(function() {
        // switch visibility
        isVisible = !isVisible;

        // change the link depending on whether the element is shown or hidden
        if ($(this).html()==showText) {
            $(this).html(hideText);
        }

        else {
            $(this).html(showText);
        }

        // toggle the display
        $(this).parent().next('.djseform_field').slideToggle('slow');

        // return false so any link destination is not followed
        return false;
    });
});

Answer 2

你的jquery应该是这样的：

$(document).ready(function() {
    $('.toggle-div').click(function(){

         $('.djseform_field').slideToggle( "slow", function() {

         });
});

你的Html应该：

<div class="djseform_field">111</div>
<div class="djseform_field">222</div>
<div class="djseform_field" >333</div>
<a href="javascript:void(0)" class="toggle-div">toggle</a> <!-- Whatever you want to on click hide / show divs for refs i used a tag -->

实现jquery show / hide切换而不访问标记

2 个答案: