トグルがまだ機能している状態で、矢印の横に矢印を置くにはどうしたらいいですか？

Question

私は自分の見出しの隣に私の矢印（クリックするとトグルする）を持っています。
矢印<div>をH1タグに入れようとしましたが、トグルが機能しません。
誰かが私を助けることができますか？
は、私はあなたがdivとh1display: inine-blockはそう、彼らは互いに並んで座ることができるようにする必要があり、これを達成するためにあなたの答えに

$('a[id^="module-tab-"]').click(function() { 
 
    $(this).next('.hi').toggleClass("left-image right-image"); 
 
});

.left-image { 
 
    background-image: url('http://i.stack.imgur.com/euD9p.png'); 
 
    width: 20px; 
 
    height: 20px; 
 
    background-repeat: no-repeat; 
 
} 
 
.right-image { 
 
    background-image: url('http://i.stack.imgur.com/dzs9m.png'); 
 
    width: 20px; 
 
    height: 20px; 
 
    background-repeat: no-repeat; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<table> 
 
    <tr style='background-color: lightgray; min-height: 200px;'> 
 
    <td colspan='10'> 
 
     <a href='#' id='module-tab-1' class='toggler' data-prod-cat='1'><h1 style='margin-bottom: 0px;'> Gearchiveerde Storingen </h1></a> 
 
     <div class='left-image hi'></div> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 1

を編集したスニペットを追加することを好みます。 a要素内のdivを移動することもできます。最後に、next()の代わりにfind()を使用するようにjQueryを修正する必要があります。あなたの#module-tab-1と.left-image.hi表示inline-blockを作る

$('a[id^="module-tab-"]').click(function() { 
 
    $(this).find('.hi').toggleClass("left-image right-image"); 
 
});

h1 { 
 
    display: inline-block; 
 
} 
 
div.hi { 
 
    width: 20px; 
 
    height: 20px; 
 
    background-repeat: no-repeat; 
 
    display: inline-block; 
 
} 
 
.left-image { 
 
    background-image: url('http://i.stack.imgur.com/euD9p.png'); 
 
} 
 
.right-image { 
 
    background-image: url('http://i.stack.imgur.com/dzs9m.png'); 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<table> 
 
    <tr style='background-color: lightgray; min-height: 200px;'> 
 
    <td colspan='10'> 
 
     <a href='#' id='module-tab-1' class='toggler' data-prod-cat='1'> 
 
     <h1 style='margin-bottom: 0px;'>Gearchiveerde Storingen</h1> 
 
     <div class='left-image hi'></div> 
 
     </a> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 2

：これを試してみてください。同様に：

$('a[id^="module-tab-"]').click(function() { 
 
    $(this).next('.hi').toggleClass("left-image right-image"); 
 
});

#module-tab-1 { 
 
    display: inline-block; 
 
} 
 

 
.left-image.hi { 
 
    display: inline-block; 
 
} 
 

 
.left-image { 
 
    background-image: url('http://i.stack.imgur.com/euD9p.png'); 
 
    width: 20px; 
 
    height: 20px; 
 
    background-repeat: no-repeat; 
 
} 
 
.right-image { 
 
    background-image: url('http://i.stack.imgur.com/dzs9m.png'); 
 
    width: 20px; 
 
    height: 20px; 
 
    background-repeat: no-repeat; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<table> 
 
    <tr style='background-color: lightgray; min-height: 200px;'> 
 
    <td colspan='10'> 
 
     <a href='#' id='module-tab-1' class='toggler' data-prod-cat='1'><h1 style='margin-bottom: 0px;'> Gearchiveerde Storingen </h1></a> 
 
     <div class='left-image hi'></div> 
 
    </td> 
 
    </tr> 
 
</table>

・ホープ、このことができます：

#module-tab-1 { 
    display: inline-block; 
} 

.left-image.hi { 
    display: inline-block; 
} 

は、以下のスニペットを見てください！