- 締切済み
toggleでの構文をまとめたい
$(this).next().slideToggle('fast'); $(this).children('.yajirushi').toggleClass("active"); ２つに分かれている上記の命令文をひとつにまとめる事はできるのでしょうか？
- nerumako
- お礼率50% (25/50)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- a384939
- ベストアンサー率37% (3/8)
var $this = $(this); $this.next().slideToggle('fast'); $this.children('.yajirushi').toggleClass("active"); この２つの文を合わせることは難しいですし、今のままの方が保守しやすいです。
関連するQ&A
- アコーディオンメニューをアンカーリンクで開く
アコーディオンメニューで困っています。 色々と調べているのですが、どうもうまく動きません。 ■やりたい事 アコーディオンメニューを使っていますが、同じページからのアンカーリンク、そして別ページからのアンカーリンクで飛んできた際に、隠れているアコーディオンを開いて表示した。 ■現状 ・アンカーリンク(A.html)-------------------- <a href="B.html#アンカー名">リンク</a> ・アコーディオン設置先(B.html)------------------ <div class="aaa" id="アンカー名"> <p class="title"> アコーディオンタイトル </p> <p class="bbb"> アコーディオンの内容表示 </p> </div> ・js--------------------------------------- $(document).ready(function(){ $(".bbb").hide(); $(".title").click(function(){ $(this).toggleClass("active").next().slideToggle("slow"); $(location.hash).next(".bbb").slideToggle("slow"); }); }); 現状はこのような状態なのですが、アンカーでの動作をしてくれません。 分かる方いらっしゃいましたら、是非教えてください
- ベストアンサー
- JavaScript
- アコーディオンで開かれたパネルの位置にスクロール
アコーディオン作成でぶつかってしまったので質問させてください。 下記サイトを参考にスマホサイトにアコーディオンを作成しました。 http://pops-web.com/main/html/demo-007.html タブをクリックしたと同時に開かれているパネルの上部にスクロールさせたいのですが、 知識が貧しく苦戦しております。 理想は下記のURLのような動きにしたいと思っています。 http://lab.boy.jp/demo/accordion/index.html どなたかお分かりの方がおられましたらご教授頂けないでしょうか。 宜しくお願いいたします。 <h3 class="trigger">ここにタイトル</h3> <div class="content"> <div class="deta">ここに内容</div> </div> <h3 class="trigger">ここにタイトル</h3> <div class="content"> <div class="deta">ここに内容</div> </div> </div> //Accordion (function($){ $(function(){ //オブジェクトを保存 var accordionItem=$('#accordion'); //一旦全部消す accordionItem.find('.content').hide(); //active要素を指定して開く var no=0; accordionItem.find('.trigger').eq(no).addClass('active').next('.content').show(); //click-action accordionItem.find('.trigger').click(function () { //slide $(this).next('.content').slideToggle('slow') .siblings('div:visible').slideUp('slow'); //activeクラス切り替え $(this).toggleClass('active'); $(this).siblings('.trigger').not($(this)).removeClass('active'); }); //hover-toggle accordionItem.find('.trigger').hover(function () { //toggle hoveredクラス $(this).toggleClass('hovered'); return false; }); }); })(jQuery); 「//activeクラス切り替え」の下に以下の2行を追加したのですが、 下の方のタブになるとスクロール位置が正しい位置にスクロールされませんでした。。 var scposi = $(".trigger.active").offset().top; $('body,html').animate({ scrollTop: scposi });
- ベストアンサー
- JavaScript
- クリックすると上に開くアコーディオン
当方、設置とCSSによる表示のカスタマイズはできますが、プログラムの修正はできないためぜひ皆様のお知恵をお貸しください。よろしくお願いいたします。 現在、スマホ向けサイトをコーディング中なのですが、コンテンツをアコーディオンで作成したいと考えています。 タイトルをクリックすると中のコンテンツが見える仕組みは同じなのですが、クリックするとタイトルが下に下がり、その上にコンテンツを開くという動作をさせたい場合はどの部分をどのように修正すればよいのでしょうか？ アドバイスどうぞよろしくお願いします。 【acordion.js】 $(function(){ $(".acordion").hide(); $("h3").click(function(){ $(this).next().slideToggle(); $(this).toggleClass("open"); }); $(".acordion .close").click(function(){ $(this).parent().slideToggle(); }); }); 【acordion.jsを読み込んだHTML】 <h3>コンテンツのタイトル</h3> <div class="acordion"> コンテンツの中身。この部分をタイトルの上に開きたいです。<br /> 文章量は固定ではないため、可変に対応できると嬉しいです。 <div class="close">close</div> </div>
- ベストアンサー
- JavaScript
- jqueryをスマホの時だけ動作させたい
jqueryをスマホの時だけ動作させたいのですが、どう記述すればよいかご教示お願いいたします。 コピペOKの情報サイトからアコーディオンメニューのやり方を拝借したのですが、 PCでは動作させず、スマホで見た時だけアコーディオンにしたいと思っています。 素人ながら調べてやってみても思うようにいきません。 どなたか下記にどう追加すればよいか教えていただけないでしょうか。 宜しくお願い致します。 <script> $(function() { $('●●').each(function() { $(this).on('click', function() { $(this).toggleClass('on'); $("●●", this).slideToggle() return false; }); }); }); </script>
- 締切済み
- JavaScript
- アコーディオンが思い通りに動きません！
こんにちは。色々試してもうまくいかないため、相談させて下さい。参考サイトの「accordion 31同時開閉タイプ」を実装しようとしているのですが、思い通りの挙動になりません。現状では、見出しをクリックすると全て開いてしまいますが、開くのはクリックしたものだけで、それ以外は閉じる仕様にしたいのです。 参考サイト http://pops-web.com/main/html/demo-007.html 私がやってみたもの http://otyame.chicappa.jp/test/ ---------------------------------------------------------- ●HTML <div id="categoryListBlock"> <ul id="main"> <li id="testlist01" class="category"> <dl> <dt>見出し1</dt> <dd> <ul id="fashionItem"> <li><a href="#">テストリスト</a></li> <li><a href="#">テストリスト</a></li> <li><a href="#">テストリスト</a></li> </ul> </dd> </dl> </li> <li id="testlist02" class="category"> <dl> <dt>見出し2</dt> <dd> <ul id="fashionItem"> <li><a href="#">テストリスト</a></li> <li><a href="#">テストリスト</a></li> <li><a href="#">テストリスト</a></li> </ul> </dd> </dl> </li> </ul> </div> ●Javascript $(function(){ //オブジェクトを保存 var accordionItem=$('#main'); //一旦全部消す accordionItem.find('dd').hide(); //active要素を指定して開く var no=0; accordionItem.find('dt').eq(no).addClass('active').next('dd').show(); //click-action accordionItem.find('dt').click(function () { //slide $(this).next('dd').slideToggle('slow') .siblings('dd:visible').slideUp('slow'); //activeクラス切り替え $(this).toggleClass('active'); $(this).siblings('dt').removeClass('active'); }); //hover-toggle accordionItem.find('dt').hover(function () { //toggle hoveredクラス $(this).toggleClass('hovered'); }); }); ---------------------------------------------------------- おそらくHTMLの構造が違うため「.siblings」というセレクタが上手く動作していないのかなと思われますが、このような場合どうしたら良いのでしょうか。 よろしくお願い致します。
- ベストアンサー
- JavaScript
- jQueryで条件が正の場合にクラスを追加
開閉式のリストを作成しています。 ツリーが閉じている場合は+の画像、開いている場合は-の画像を表示させる為、 jQueryで条件が正の場合のみクラスを追加したいです。 if文を挿入するとクラスの追加が反映されません。 #.jsコード ----------------------------------------------------- $(document).ready(function() { $("dd").css("display","none"); $("dt").click(function(){ $(this).next().slideToggle("fast"); if(! $("dd").css("display","none") ) { $("dd").addClass("aaa"); } }); }); ----------------------------------------------------- ↑上記コードでddにaaaクラスがある場合画像、cssで背景画像を表示したいです。 #.htmlコード ----------------------------------------------------- <dl> <dt>ここの画像を変更させたいです。</dt> <dd> ここを開閉させたいです。 </dd> </dl> ----------------------------------------------------- よろしくお願い致します。
- 締切済み
- JavaScript
- jqueryで作ったアコーディオンメニューの挙動
jQuery初心者です。 http://triplexxx.jp/archives/150 こちらのサイトを参考にアコーディオンメニューを作成しました。 スムーズなスライドのメニューは出来たのですが、 どのメニューもリンクが効きません。 return falseをreturnに変えると効くようになりますが、 当然のことながらページのトップに遷移してしまいます。 どなたか解決策をご存知の方がいらっしゃいましたらご教授下さい。 いちお自分が書いたコードを載せておきます =================================================== var j$ = jQuery; j$(function(){ j$(".acc").each(function(){ j$("li > a", this).each(function(index){ var $this = j$(this); if(index > 0) $this.next().hide(); var params = {height:"toggle", opacity:"toggle"}; $this.click(function(){ j$(this).next().animate(params, {duration:"fast"}).parent().siblings().children("ul:visible").animate(params, {duration:"fast"}); return; }); }); }); }); ===================================================
- ベストアンサー
- AJAX
- jQueryを使用したギャラリー
下記、スクリプトを書きましたが、 Prev / Nextは表示されるのですが、枚数の取得→ (1 of 4) このような表記が表示されません。 なぜでしょうか？ .html('('+ (nextIndex+1) +' of '+ (this.data.length) + ')'); この部分がその表記部分だと思うのですが、、、 なにぶん、素人なもので理解が出来ず。 どなたかご教授頂けたらと思います。何卒宜しくお願い致します！！！！！ jQuery(document).ready(function($) { // We only want these styles applied when javascript is enabled $('div.content').css('display', 'block'); $(".each-gallery").each(function(i){ // Initially set opacity on thumbs and add // additional styling for hover effect on thumbs var onMouseOutOpacity = 0.67; // Initialize Advanced Galleriffic Gallery var gallery = $('#thumbs' + i).galleriffic({ delay: 600, numThumbs: 10, preloadAhead: 10, enableTopPager: false, enableBottomPager: false, imageContainerSel: '#slideshow'+ i, controlsContainerSel: '#controls'+ i, captionContainerSel: '#caption'+ i, loadingContainerSel: '#loading'+ i, renderSSControls: false, renderNavControls: true, prevLinkText: 'Prev', nextLinkText: 'Next', nextPageLinkText: 'Next ›', prevPageLinkText: '‹ Prev', autoStart: false, syncTransitions: false, defaultTransitionDuration: 600, onSlideChange: function(prevIndex, nextIndex) { // 'this' refers to the gallery, which is an extension of $('#thumbs') this.find('ul.thumbs') .hide(); this.find('ul.thumbs').children() .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end() .eq(nextIndex).fadeTo('fast', 1.0); // Update the photo index display this.$captionContainer.find('div.photo-index') .html('('+ (nextIndex+1) +' of '+ (this.data.length) + ')'); }, onPageTransitionOut: function(callback) { this.fadeTo('fast', 0.0, callback); }, onPageTransitionIn: function() { var prevPageLink = this.find('a.prev').css('visibility', 'hidden'); var nextPageLink = this.find('a.next').css('visibility', 'hidden'); // Show appropriate next / prev page links if (this.displayedPage > 0) prevPageLink.css('visibility', 'visible'); var lastPage = this.getNumPages() - 1; if (this.displayedPage < lastPage) nextPageLink.css('visibility', 'visible'); this.fadeTo('fast', 1.0); } }); gallery.find('a.prev').click(function(e) { gallery.previousPage(); e.preventDefault(); }); gallery.find('a.next').click(function(e) { gallery.nextPage(); e.preventDefault(); }); function pageload(hash) { // alert("pageload: " + hash); // hash doesn't contain the first # character. if(hash) { $.galleriffic.gotoImage(hash); } else { gallery.gotoIndex(0); } } }); // Initialize history plugin. // The callback is called at once by present location.hash. /****************************************************************************************/ }); $('.linkToPrevWorks').children().click(function(){ $(this).parent().next().children('.toggleWrapper').fadeIn(900); $(this).parent().css("display","none"); }); jQuery(document).ready(function($) { $('.imgWrapper').children().next('img').css("margin-top", "20px") });
- ベストアンサー
- JavaScript
- Jquery アコーディオンについて
知恵袋、Web初心者です。 Jquery / アコーディオンについて質問です。 Jqueryを使って２段のアコーディオンメニューを実装しているのですが、 １つのアコーディオンを押すと他のアコーディオンが閉まる様設定したいです。 現在下記の様に記述しています。 ----------------------------------------- $(document).ready(function(){ $('.accordion').click(function() { $('.accordion').next().slideUp(); $(this).next().slideToggle(); }).next().hide(); }); ---------------------------------------- この記述ですと２段目のアコーディオンを押すと１段目も閉じてしまい、結果的に２段目も見えなくなってしまう、 という状況です。 ２段目だけ機能させる事は可能でしょうか？？ 質問が分かりにくかったら申し訳ありません。 初歩的な質問かも知れませんが、ご教授頂ければ幸いです。 よろしくお願い致します。
- ベストアンサー
- JavaScript
- アコーディオンjquery
ロリポップのサーバーにアコーディオンjqueryをおいています。 以下のように設置すると、項目をクリックしたときに 下に展開されるのですが chromeだと、左に余白ができてしまいます。 ie9だと、変に余白ができて、テキストがおかしな挙動します。。。 なぜでしょうか？ --------------- <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <script type="text/javascript" src="../jq01/jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(function() { $("dd").hide(); $("dt").click(function() { $(this).toggleClass("bg2"); $(this).next().slideToggle(); }); }); </script> </head> <body> <dt class="bg1">ああああああああああああああああああああああああああああ</dt> <dd>いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</dd> <dt class="bg1">うううううううううううううううううううううううううう</dt> <dd>えええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええ</dd> <dt class="bg1">おおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお</dt> <dd>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</dd> </body> </html>
- 締切済み
- JavaScript
