消耗品のボタンは失敗しない…落とせ！

消耗品のボタンは失敗しない…落とせ！ – スペイン語でWordPressのWordpressを修正

WordPress からの WordPress の修正に関する質問:

ユーザーからの質問 👇

こんにちは、次の機能を備えた折りたたみ可能なボタンを自分のサイト (localhost) に追加したいと考えています。ここあなたは実際にそれを見ることができます）：

ボタンの幅は 100% である必要はありませんが、ボタン内のテキストに収まる必要がありますボタンが次の行に移動した後、単語を強制せずにテキスト行にボタンを挿入できます (ドロッププラグインまたは- matic ただし、ボタンの後の単語は、同じ行に書かれていても、強制的に次の行に移動します)

ボタンを手動で作成する方法（プラグインなし）を探していたところ、次のコードを使用して必要なボタンを作成したw3schoolsページにたどり着きました（上記のリンクを参照）

<!DOCTYPE html>
<html>
<head>
<style>
.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  border: none;
}

.ccontent {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: .3s ease-out;
  background-color: #f1f1f1;
  box-shadow: 5px 5px 10px 3px inset rgba(0,0,0,0.60);
}
</style>
</head>
<body>

Does <button class="collapsible">this</button> works?
<div class="ccontent"><p>Yes!</p></div>
Good job!

<script type="text/javascript">
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}
</script>

</body>
</html>

次に、ワードプレスにコードを追加する方法を見つけようとしたので、これが私がしたことです

.Collapsible および .content は、プラグインを使用して javascript style.css ファイルをフッターに追加しました

その後、投稿で次のコードを書きました

Does <button class="collapsible">this</button> works?
<div class="ccontent"><p>Yes!</p></div>
Good job!

ただし、ボタンは正しく表示されますが、クリックしても何も起こりません。ボタンが表示されているので、問題はjavascriptコードに関連していると思います。
SEO ご覧のとおり、彼が私の投稿で指摘したのは、最初の行と 2 番目の行の間の空白です。

ページのソースコードを開くと（CTRL + U）、タグの1行前にスクリプトが表示されるため、JavaScriptがロードされていると確信しています

このトピックは 1 年 5 か月前に更新されました。このトピックは 1 年 5 か月前に更新されました。このトピックは 1 年 5 か月前に更新されました。このトピックは 1 年 5 か月前に更新されました。

(@ronaldvw)

1年5ヶ月前

こんにちは、

ブラウザのエラーコンソールを確認すると、どのコードが失敗しているかがわかります。ただし、これは、jQuery を使用して本当に単純にする必要のあるコードの一部です。

見て： https://jsfiddle.net/ronald/b8x123tc/ 例えば。

コードを WordPress サイトに「正しい方法」で追加するには、次のコードを子テーマの最後に追加します。 functions.php ファイルですが、閉じる前に ?>、もしあれば：

function my_footer_script() { ?>
    <script type="text/javascript">
    			
        jQuery(document).ready(function(){
            $('.collapsible').click(function() {
                $(this).next().slideToggle();
            }).next().hide();
        });
    		
    </script>
<?php
}
add_action('wp_print_footer_scripts', 'my_footer_script');

(@giannit)

1年5ヶ月前

@ronaldvw ありがとうございます！私は主な問題を解決しました。行を編集することにしました
var content = this.nextElementSibling;
の
var content = this.parentElement.nextElementSibling;

今、空白を削除しようとしています。

あなたのソリューションは非常に興味深いです。コードをに追加しました functions.php 閉じる前のファイル ?>、次にその下のCSSを削除しました .collapsible よ .ccontent、そして最後に投稿ページを更新すると、ページが読み込まれたときにコンテンツが既に表示されており、ボタンを押すことができないという問題があります。

また、コンソールにこのエラーメッセージが表示されます
Uncaught TypeError: $ is not a function そして問題が来ると言います $('.collapsible').click(function() {

エラーメッセージの完了

Uncaught TypeError: $ is not a function ?preview_id=3389&preview_nonce=dd08c156ab&_thumbnail_id=-1&preview=true:190
    at HTMLDocument.<anonymous> (?preview_id=3389&preview_nonce=dd08c156ab&_thumbnail_id=-1&preview=true:190)
    at i (jquery.js?ver=1.12.4-wp:2)
    at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4-wp:2)
    at Function.ready (jquery.js?ver=1.12.4-wp:2)
    at HTMLDocument.J (jquery.js?ver=1.12.4-wp:2)

この回答は 1 年 5 か月前に変更されました。

(@ronaldvw)

1年5ヶ月前

こんにちは、

コードの最初の行を次のように変更します。

jQuery(document).ready(function($){

それ以外の場合は、オンラインで表示できなければ診断が困難です。彼は私が投稿したjsfiddle jQuery がロードされている限り、コードが機能することを示しています。

この回答は 1 年 5 か月前に変更されました。理由: タグがコードから削除されました

(@giannit)

1年5ヶ月前

@ronaldvwサポートに感謝します。あなたが言ったように最初の行を変更しましたが、エラーは消えませんでした。 2つのドル記号を置き換えてみました jQuery、したがって

        jQuery(document).ready(function(){
            jQuery('.collapsible').click(function() {
                jQuery(this).next().slideToggle();
            }).next().hide();
        });

エラーはなくなりましたが、ご覧のとおりボタンはまだ機能していませんソビデオ。

(@ronaldvw)

1年5ヶ月前

ビデオをデバッグできません。何かオンラインになったらお知らせください。別のビデオを見ることができます。

(@giannit)

1年5ヶ月前

@ronaldvwロナルドありがとう！あなたの方法を使用して、図のように 2 つの要素を同じ行に配置できるかどうか知っていますか? ソ画像？

(@giannit)

1年5ヶ月前

編集：間違ったメッセージ

この回答は 1 年 5 か月前に変更されました。

それはあなたの問題を解決しましたか？

Tech-JP