jQuery帮助：toggle（）无法正常工作

Question

我正在尝试使用JQuery切换功能，但无法正确使用。 它没有快速地上下滑动，而是运行得很快，并且没有动画效果。
我想在代码中实现滑动效果，如下所示 （请参阅网站设计，重新设计服务滑块）：

这是我的代码：

HTML：

<div>
     <div class="jquery_inner_mid">
            <div class="main_heading">
                <a href="#">
                    <img src="features.jpg" alt="" title="" border="0" /></a>
            </div>

            <div class="plus_sign">
                <img id="imgFeaturesEx" src="images/plus.jpg" alt="" title="" border="0" />
                <img id="imgFeaturesCol" src="images/minus.jpg" alt="" title="" border="0" /></div>
            <div class="toggle_container">
                <div id="divMain" >
                </div>
            </div>
        </div>
        <div class="jquery_inner_mid">
            <div class="main_heading">
                <img src="About.jpg" alt="" title="" /></div>
            <div class="plus_sign">
                <img id="imgTechnoEx" src="images/plus.jpg" alt="" title="" border="0" />
                <img id="imgTechnoCol" src="images/minus.jpg" alt="" title="" border="0" /></div>
            <div class="toggle_container">
                <div id="divTechnossus" >
                </div>
            </div>
        </div>
    </div>

JQuery的：

 $(function() {

            document.getElementById('imgFeaturesCol').style.display = 'none';
            document.getElementById('imgTechnoCol').style.display = 'none';


            $('#imgFeaturesEx').click(function() {


                $.getJSON("/Visitor/GetFeatureInfo", null, function(strInfo) {
                    document.getElementById('divMain').innerHTML = strInfo;
                });
                $("#divMain").toggle("slow");
                document.getElementById('imgFeaturesEx').style.display = 'none';
                document.getElementById('imgFeaturesCol').style.display = 'block';
            });
            $('#imgFeaturesCol').click(function() {
                document.getElementById('divMain').innerHTML = "";
                $("#divMain").toggle("slow");
                document.getElementById('imgFeaturesCol').style.display = 'none';
                document.getElementById('imgFeaturesEx').style.display = 'block';
            });

            $('#imgTechnoEx').click(function() {
                $.getJSON("/Visitor/GetTechnossusInfo", null, function(strInfo) {
                    document.getElementById('divTechnossus').innerHTML = strInfo;
                });
                $("#divTechnossus").slideToggle("slow");
                document.getElementById('imgTechnoEx').style.display = 'none';
                document.getElementById('imgTechnoCol').style.display = 'block';
            });
            $('#imgTechnoCol').click(function() {
                document.getElementById('divTechnossus').innerHTML = "";
                $("#divTechnossus").slideToggle("slow");
                document.getElementById('imgTechnoCol').style.display = 'none';
                document.getElementById('imgTechnoEx').style.display = 'block';
            });
  });

编辑：我也想优化此代码（因为COZ代码不是很干净+行数也可能减少）。 我不知道有关JQuery的正确编码标准。 我是JQuery的新手，所以请向我展示正确的路径，以便我可以优化此愚蠢的代码。

Answer 1

我无法抗拒优化与jQuery一起使用的代码。

这让我感到困惑，为什么当您已经包含jQuery时，为什么在其中拥有所有这些getElementById调用

尝试这个：

( function() {
        $( [ '#imgFeaturesCol', '#imgTechnoCol' ] ).hide();

        $('#imgFeaturesEx').click(function() {
            $.getJSON("/Visitor/GetFeatureInfo", null, function(strInfo) {
                $( '#divMain' ).html( strInfo )
                               .slideToggle( "slow" );
            });
            $( '#imgFeaturesEx' ).hide();
            $( '#imgFeaturesCol' ).show();
        });
        $('#imgFeaturesCol').click(function() {
            $( '#divMain' ).html( "" )
                           .slideToggle( "slow" );
            $( '#imgFeaturesCol' ).hide();
            $( '#imgFeaturesEx' ).show();
        });

        $('#imgTechnoEx').click(function() {
            $.getJSON("/Visitor/GetTechnossusInfo", null, function(strInfo) {
               $( '#divTechnossus').html( strInfo )
                                   .slideToggle( "slow" );
            });
            $( '#imgTechnoEx' ).hide();
            $( '#imgTechnoCol' ).show();
        });
        $('#imgTechnoCol').click(function() {
            $( '#divTechnossus').html( "" )
                                .slideToggle( "slow" );
            $( '#imgTechnoCol' ).hide();
            $( '#imgTechnoEx' ).show();            
        });
})();

Answer 2

使用slideToggle('slow'); toggle();

Answer 3

Jacob Relkin为您的代码提供了一个很好的选择，我借此机会为该线程的查看者提供了一些规则，以指导从javascript编码到jquery编码的转换：

将所有document.getElementById('element')替换为$('element')

2-对于所有css样式，都使用函数$('element').css("name","value");

3-对于在同一元素上的隐藏和显示，可以使用toggle或slideToggle函数及其效果（慢，快..）