JQuery隐藏和显示脚本在表单中不起作用

Question

我在 jQuery 中有一个函数可以隐藏和显示div，它曾经完美地工作过。

但现在没有显示，它保持隐藏状态，或者有时使用不同的 jQuery 版本提交form，我不知道我的错误在哪里。

我正在运行最新的 jQuery 版本，并且我也在运行 bootstrap，所以它可能会妨碍您。

这是一个 jsFiddle，点击后表单会在其中提交，我现在就体验到这一点。 http://jsfiddle.net/d3fNj/

功能：

//function to hide the extra info for the cars in manage vehicles
(function ($) {
    $.fn.showHide = function (options) {

    //default vars for the plugin
        var defaults = {
            speed: 250,
            easing: '',
            changeText: 0,
            showText: 'View Details',
            hideText: 'close'

        };
        var options = $.extend(defaults, options);

        $(this).click(function () {
                // optionally add the class .toggleDiv to each div you want to automatically close
                      $('.toggleDiv:hidden').slideUp(options.speed, options.easing);
             // this var stores which button you've clicked
             var toggleClick = $(this);
             // this reads the rel attribute of the button to determine which div id to toggle
             var toggleDiv = $(this).attr('rel');
             // here we toggle show/hide the correct div at the right speed and using which easing effect
             $(toggleDiv).slideToggle(options.speed, options.easing, function() {
             // this only fires once the animation is completed
             if(options.changeText==1){
             $(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
             }
              });

          return false;

        });

    };
})(jQuery);



$(document).ready(function(){

   $('.show_hide').showHide({
        speed: 250,  // speed you want the toggle to happen
        easing: '',  // the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI
        changeText: 1, // if you dont want the button text to change, set this to 0
        showText: 'View Details',// the button text to show when a div is closed
        hideText: 'Close' // the button text to show when a div is open

    });
});

这里是 HTML：

<form action="admin/tool/editvehicle.php" method="post">
    <ul>
        <li>
            <br><b>Price</b>: <input name="price" type="text" class="span2" value="14699">
        </li>
        <li>
            <button name="delete" class="btn btn-danger" type="submit" >Delete Vehicle</button>
        </li>
        <li>
            <button name="sold" class="btn btn-success" type="submit" >Mark as Sold</button>
        </li>
        <li>
            <button class="btn btn-primary" name="editpictures" type="submit" >Edit Pictures</button>
        </li>
        <li>
            <button type="submit" name="editauto" class="btn  btn-inverse" >Apply Changes</button>
        </li>
    </ul>
    <button class="show_hide" href="#" rel="slidingDiv1">View Details</button>
    <div id="slidingDiv1" class="toggleDiv" style="display: none;">
    <ul> <br />
        <li><b>Year</b>:<br /><input type="text" name="year" value="2011" class="span2"></li>
        <li><b>Make</b>: <br /><input type="text" name="make" value="Acura" class="span2"></li>
        <li><b>Model</b>: <br /><input type="text" name="model" value="TCi" class="span2"></li>
        <li><b>Mileage</b>: <br /><input type="text" name="mileage" value="135222" class="span2"></li>
        <li><b>Engine</b>:<br /> <input type="text" name="engine" value="5.0" class="span2"></li>
        <li><b>Stereo</b> <br /><input type="text" name="sound_system" value="beats audio" class="span2"></li>
        <li><b>Attribute 1 </b> <input type="text" name="att1" value="adfasdf" class="span2"></li>
        <li><b>Attribute 2</b> <input type="text" name="att2" value="" class="span2"></li>
        <li><b>Attribute 3</b> <input type="text" name="att3" value="" class="span2"></li>
        <li><b>Attribute 4</b> <input type="text" name="att4" value="" class="span2"></li>
        <li><b>Attribute 5</b> <input type="text" name="att5" "value="" class="span2"></li>
        <li><b>Attribute 6</b> <input type="text" name="att6" value="" class="span2"></li>
        <li><b>Attribute 7</b> <input type="text" name="att7" value="" class="span2"></li>
        <li><b>Attribute 8</b> <input type="text" name="att8" value="" class="span2"></li>
        <li><b>Attribute 9</b> <input type="text" name="att9" value="" class="span2"></li>
        <li><b>Attribute 10</b> <input type="text" name="att10" value="" class="span2"></li>
        <li><b>Attribute 11</b> <input type="text" name="att11" value="" class="span2"></li>
        <li><b>Attribute 12</b> <input type="text" name="att12" value="" class="span2"></li>
        <li><b>Attribute 13</b> <input type="text" name="att13" value="" class="span2"></li>
        <li><b>Attribute 14</b> <input type="text" name="att14" value="" class="span2"></li>
        <li><b>Attribute 15</b> <input type="text" name="att15" value="" class="span2"></li>
        <li><b>Vin</b> <input type="text" name="vin" value="FASDFA23423ASDF" class="span2"></li>
        <li><input type="text" name="auto_id" value="59" class="span2" readonly><li>
    <ul>

    </div>
</form>

Answer 1

我在小提琴中加载了 jQuery 并更改了这一行：

<button class="show_hide" href="#" rel="slidingDiv1">View Details</button>

到：

<button class="show_hide" rel="#slidingDiv1">View Details</button>

它正在工作。