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.

getElementById当你已经包含jQuery时,为什么你在那里拥有所有这些调用让我感到困惑

试试这个:

( 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();            
        });
})();