使用HTML，CSS和JS的Asp.Net MVC中的手風琴

Question

試圖在我的應用程序中實現手風琴。 手風琴本身可以正確顯示，但是單擊“ +”以打開描述時，什么都沒有發生。 當用戶單擊每個“ +”時，應打開選項卡以顯示相應的描述。 誰能看到導致它無法正常工作的原因？ 參見下面的代碼。

HTML （只是其中一個標簽的摘錄）

 <div class="accord-tab-box"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="accordion-box"> <div class="accord-elem"> <div class="accord-title"> <h5><i class="fa fa-money fa-fw"></i>Software Development</h5> <a class="accord-link" href="#"></a> </div> <div class="accord-content"> <p>IT related have a team of software developers who are skilled in Open source Java, Spring, Hibernate, Struts, GWT; DotNet framework and have written many web based systems:<br />• Requisition system<br />• Tender management system <br />• Invoice tracking system<br />• Our team has more than 20 years experience in Software development life cycle. Reference sites: <br />• KZN Department of Works;<br />• KZN Department Of Education;<br />• EC DEDEAT;<br /><br />• Neha Shipping;<br /><br />• SJS Consulting<br /> </p> </div> </div> </div> </div> </div> </div> </div> 

的CSS

 .container .content {} hr, .borderedbox { border-color: #D7D7D7; } .inspace-5 { padding: 5px; } .imgl { margin: 0 15px 10px 0; clear: left; } .imgr { margin: 0 0 10px 15px; clear: right; } .fl_left, .imgl { float: left; } .fl_right, .imgr { float: right; } .borderedbox { border: 1px solid; border-color: darkgray; } .accord-tab-box { padding-top: 40px; padding-bottom: 20px; } .accordion-box { margin-bottom: 20px; } .accord-elem { margin-bottom: 20px; } .accord-title { padding: 16px 14px; border: 1px solid #dbdbdb; position: relative; } .accord-title h5 { padding-right: 48px; } .accord-title h5 i { color: #007aff; font-size: 20px; vertical-align: middle; margin-right: 12px; } a.accord-link { display: inline-block; position: absolute; width: 46px; height: 100%; top: 0; right: 0; border-left: 1px solid #dbdbdb; background: url('/Content/MyTemplate/images/add.png') center center no-repeat; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .accord-elem.active a.accord-link { background: url('/Content/MyTemplate/images/substract.png') center center no-repeat; } a.accord-link.opened { background: url('/Content/MyTemplate/images/substract.png') center center no-repeat; } .accord-content { display: none; padding: 22px; border: 1px solid #dbdbdb; border-top: none; overflow: hidden; } .accord-content span.image-content { display: inline-block; float: left; width: 68px; height: 68px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; margin-right: 22px; background: #007aff; } .accord-content span.logo-content { display: inline-block; float: left; width: 110px; margin-right: 15px; } .accord-content span.image-content i { color: #fff; font-size: 30px; text-align: center; width: 100%; line-height: 68px; vertical-align: middle; } .accord-content span.logo-content i { color: #fff; font-size: 30px; text-align: center; width: 100%; line-height: 68px; vertical-align: middle; } .accord-elem.active .accord-content { display: block; } .why-convertible-box { padding-top: 60px; } .why-convertible-box h1 { margin-bottom: 10px; } .why-convertible-box h1 span { font-weight: 600; } .why-convertible-box h1 i { color: #0a9dbd; margin-left: 10px; } .why-convertible-box p { margin-bottom: 15px; } .why-convertible-box pa { color: #0076f9; font-weight: 700; } 

JS

  var clickElem = $('a.accord-link'); clickElem.on('click', function (e) { e.preventDefault(); var $this = $(this), parentCheck = $this.parents('.accord-elem'), accordItems = $('.accord-elem'), accordContent = $('.accord-content'); if (!parentCheck.hasClass('active')) { accordContent.slideUp(400, function () { accordItems.removeClass('active'); }); parentCheck.find('.accord-content').slideDown(400, function () { parentCheck.addClass('active'); }); } else { accordContent.slideUp(400, function () { accordItems.removeClass('active'); }); } }); 

Answer 1

也許你忘了鏈接jQuery

 jQuery(document).ready(function(){ var clickElem = $('a.accord-link'); clickElem.on('click', function (e) { e.preventDefault(); var $this = $(this), parentCheck = $this.parents('.accord-elem'), accordItems = $('.accord-elem'), accordContent = $('.accord-content'); if (!parentCheck.hasClass('active')) { accordContent.slideUp(400, function () { accordItems.removeClass('active'); }); parentCheck.find('.accord-content').slideDown(400, function () { parentCheck.addClass('active'); }); } else { accordContent.slideUp(400, function () { accordItems.removeClass('active'); }); } }); }); 

 .container .content {} hr, .borderedbox { border-color: #D7D7D7; } .inspace-5 { padding: 5px; } .imgl { margin: 0 15px 10px 0; clear: left; } .imgr { margin: 0 0 10px 15px; clear: right; } .fl_left, .imgl { float: left; } .fl_right, .imgr { float: right; } .borderedbox { border: 1px solid; border-color: darkgray; } .accord-tab-box { padding-top: 40px; padding-bottom: 20px; } .accordion-box { margin-bottom: 20px; } .accord-elem { margin-bottom: 20px; } .accord-title { padding: 16px 14px; border: 1px solid #dbdbdb; position: relative; } .accord-title h5 { padding-right: 48px; } .accord-title h5 i { color: #007aff; font-size: 20px; vertical-align: middle; margin-right: 12px; } a.accord-link { display: inline-block; position: absolute; width: 46px; height: 100%; top: 0; right: 0; border-left: 1px solid #dbdbdb; background: url('/Content/MyTemplate/images/add.png') center center no-repeat; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .accord-elem.active a.accord-link { background: url('/Content/MyTemplate/images/substract.png') center center no-repeat; } a.accord-link.opened { background: url('/Content/MyTemplate/images/substract.png') center center no-repeat; } .accord-content { display: none; padding: 22px; border: 1px solid #dbdbdb; border-top: none; overflow: hidden; } .accord-content span.image-content { display: inline-block; float: left; width: 68px; height: 68px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; margin-right: 22px; background: #007aff; } .accord-content span.logo-content { display: inline-block; float: left; width: 110px; margin-right: 15px; } .accord-content span.image-content i { color: #fff; font-size: 30px; text-align: center; width: 100%; line-height: 68px; vertical-align: middle; } .accord-content span.logo-content i { color: #fff; font-size: 30px; text-align: center; width: 100%; line-height: 68px; vertical-align: middle; } .accord-elem.active .accord-content { display: block; } .why-convertible-box { padding-top: 60px; } .why-convertible-box h1 { margin-bottom: 10px; } .why-convertible-box h1 span { font-weight: 600; } .why-convertible-box h1 i { color: #0a9dbd; margin-left: 10px; } .why-convertible-box p { margin-bottom: 15px; } .why-convertible-box pa { color: #0076f9; font-weight: 700; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="accord-tab-box"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="accordion-box"> <div class="accord-elem"> <div class="accord-title"> <h5><i class="fa fa-money fa-fw"></i>Software Development</h5> <a class="accord-link" href="#"></a> </div> <div class="accord-content"> <p>IT related have a team of software developers who are skilled in Open source Java, Spring, Hibernate, Struts, GWT; DotNet framework and have written many web based systems:<br />• Requisition system<br />• Tender management system <br />• Invoice tracking system<br />• Our team has more than 20 years experience in Software development life cycle. Reference sites: <br />• KZN Department of Works;<br />• KZN Department Of Education;<br />• EC DEDEAT;<br /><br />• Neha Shipping;<br /><br />• SJS Consulting<br /> </p> </div> </div> </div> </div> </div> </div> </div>