Question

在此页面上：http://themejulies.tumblr.com

左边有一个信息图标。我希望用户能够单击它并显示包含信息的div。

我正在努力实现这一点而且它对我不起作用。这是我的代码：

HTML

 <div class="site-wrapper">
    {block:ifShowInfoButton}

     <a class="show_hide" href="#" rel="#slidingDiv"><i class="fa  fa-info-circle fa-3x" style="position:absolute; margin-left:0.4%; margin-top:0.4%; color:{color:Info Button Color};"></i></a>

     <div id="slidingDiv" class="toggleDiv" style="display: none;">Fill this space with really interesting content.</div>{/block:ifShowInfoButton}

jQuery

 <script type="text/javscript">
        (function ($) {
    $.fn.showHide = function (options) {

    //default vars for the plugin
        var defaults = {
            speed: 1000,
            easing: '',
            changeText: 0,
            showText: 'Show',
            hideText: 'Hide'

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

        $(this).click(function () {
// optionally add the class .toggleDiv to each div you want to automatically close
                      $('.toggleDiv').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);</script>

任何帮助都会很精彩。谢谢。

Answer 1

您必须使用插件执行此任务，
转到此链接http://dimsemenov.com/plugins/magnific-popup/
下载插件并使用它，你也可以通过谷歌搜索找到其他插件通过插件，这项任务变得非常容易。

Div不会在点击时显示

1 个答案: