Question

我想在我正在开发的新版本网站上为我们公司的两个分部创建侧标签幻灯片。经过大量的研究，我决定让它变得相对简单（或者我认为）。

我创建了一个div（＃CMTabWrap，245px），它包含了另外两个div：#CMContent（200px）和#BNOCM_tab（45px）。我将#CMTabWrap的边距设置为-200px（#CMContent的宽度），只显示选项卡。 HTML和CSS工作正常。

在我的HTML中的div下面，我把代码放在下面。点击它，它应该测试对象的类，并将其移入或移出（视情况而定）内容的宽度，使整个工具包和kaboodle可见或将其缩小到选项卡。

我想说我是通过JSLint运行代码的，并且在这里按照相同的行读了几个问题。我应用了一些修复，但仍然没有发生任何事情。我觉得这是显而易见的事情 - 我不是JS的中间人，而不是一个菜鸟。任何帮助表示赞赏。

   <script type="text/javascript">

   /*global $, jQuery, alert*/
   $(function(){
   $("#BNOCM_tab").click(function () {
     $('#BNOCM_tab').addClass('in');
     var contentWidth = $('#CMContent').width();

     if ($(this).is('.out')) {
        $(this).removeClass('out').addClass('in');
        $("#CMTabWrap").animate(
            {"left": '+=' + contentWidth},
            "slow"
        );
    }
    if ($(this).is('.in')) {
        $(this).removeClass('in').addClass('out');
        $("#CMTabWrap").animate(
            {"right": '-=' + contentWidth},
            "slow"
        );
    });
    });
    </script>

Answer 1

在点击功能this内部引用了点击的元素，因此$(this)和$("#BNOCM_tab")始终相同。另外，您的第二个if应该是else，因为现在您只需更换＆＃34;中的类＆＃34;如@wwwmarty指出的那样out。所以你的（在$（document）.ready中）看起来像这样：

<div id="BNOCM_tab" class="out"></div> // add class 'out to the tab

var $Wrap = $("#CMTabWrap"), // create a jQuery object only once, store it
    $Tab = $("#BNOCM_tab");

$Tab.click(function () {
    var contentWidth = $('#CMContent').width();

    // use .hasClass() for class check, note there's no dot in the name
    if ($Tab.hasClass('out')) {
        $Tab.removeClass('out').addClass('in');
        $Wrap.animate({left: '+=' + contentWidth}, "slow");
    } else {
        $Tab.removeClass('in').addClass('out');
        $Wrap.animate({left: '-=' + contentWidth}, "slow");
    };
});

如果这不起作用，请将html的相关部分添加到您的问题或/并制作一个小提琴并发布究竟出错的地方。

滑动菜单div - 单击功能不起作用

1 个答案: